jQuery - Dynamisch Schaltfläche über Highcharts div hinzufügen

Question

Ich erstelle dynamisch eine Reihe von Diagrammen mit jQuery-3.2.1, highcharts und bootstrap-3.

var iDiv = document.getElementById("logs"); 
var innerDiv = document.createElement('div'); 
innerDiv.id = key; 
iDiv.appendChild(innerDiv); 
$('#' + key).highcharts(json); 

Jetzt versuche ich, Spiel hinzufügen und Pause-Tasten über das Diagramm div so, dass es wie in dem Bild sieht

Ich bin kein Experte in jQuery und ich bin ein wenig verwirrt über die verschiedenen Methoden, um dies zu tun. Bisher habe ich folgendes versucht, aber erfolglos.

var btn = document.createElement('button'); 
btn.addClass('btn btn-primary') 
innerDiv.append(btn); 

Ich habe noch keine Stil oder Ereignis hinzugefügt. Das Problem ist, dass die Schaltfläche nicht angezeigt wird. Irgendein Rat?

Answer 1

Zuerst können Sie eine Schaltfläche mit einigen Standardstilen erstellen, sodass die Schaltfläche über das Diagramm schweben soll.

Ich erstelle dynamische Buttons und schreibe das CSS für den Button, so dass es aussieht, als wäre es auf dem Chart, es ist komplett mit CSS und die Button-Erstellung ist mit JavaScript .

Sie können keine Schaltfläche innerhalb des Diagramms anhängen.

Schauen Sie bitte in mein Bild, ich bin zwei dynamische Tasten erstellt und die notwendigen CSS bieten, so dass es aussieht wie es auf dem Chart wird