ハイチャートグラフィックのdivコンテナをコードで作成するにはどうすればいいですか？

Question

ハイチャートグラフィックのdivコンテナを作成する必要があります。これはコードで行う必要がありますが、動作させることはできません。

divでコードを作成する理由は、多くのグラフィックを表示する必要があるためです。

現在、私は最初にdivを作成し、次にidと最後にプロパティを作成します。グラフィック上

エラー：

例：

http://jsfiddle.net/povyq7em/1/

私のコードは次のとおりです。

var nombre="container-speed"; 
 

 
var div = document.createElement('div'); 
 
div.setAttribute("style", "width: 580px; height: 400px; float: left"); 
 
div.setAttribute("id", nombre); 
 

 

 
var gaugeOptions = { 
 

 
    chart: { 
 
     type: 'solidgauge' 
 
    }, 
 

 
    title: null, 
 

 
    pane: { 
 
     center: ['50%', '85%'], 
 
     size: '140%', 
 
     startAngle: -90, 
 
     endAngle: 90, 
 
     background: { 
 
      backgroundColor: (Highcharts.theme && 
 
      Highcharts.theme.background2) || '#EEE', 
 
      innerRadius: '60%', 
 
      outerRadius: '100%', 
 
      shape: 'arc' 
 
     } 
 
    }, 
 

 
    tooltip: { 
 
     enabled: false 
 
    }, 
 

 

 
    yAxis: { 
 
     stops: [ 
 
      [0.1, '#55BF3B'], // green 
 
      [0.5, '#DDDF0D'], // yellow 
 
      [0.9, '#DF5353'] // red 
 
     ], 
 
     lineWidth: 0, 
 
     minorTickInterval: null, 
 
     tickAmount: 2, 
 
     title: { 
 
      y: -70 
 
     }, 
 
     labels: { 
 
      y: 16 
 
     } 
 
    }, 
 

 
    plotOptions: { 
 
     solidgauge: { 
 
      dataLabels: { 
 
       y: 5, 
 
       borderWidth: 0, 
 
       useHTML: true 
 
      } 
 
     } 
 
    } 
 
}; 
 

 

 
var chartSpeed = Highcharts.chart(nombre, Highcharts.merge(gaugeOptions, { 
 
    yAxis: { 
 
     min: 0, 
 
     max: 200, 
 
     title: { 
 
      text: 'Speed' 
 
     } 
 
    }, 
 

 
    credits: { 
 
     enabled: false 
 
    }, 
 

 
    series: [{ 
 
     name: 'Speed', 
 
     data: [80], 
 
     dataLabels: { 
 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
 
       ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
 
        '<span style="font-size:12px;color:silver">km/h</span></div>' 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: ' km/h' 
 
     } 
 
    }] 
 

 
}));

.highcharts-yaxis-grid .highcharts-grid-line { 
 
\t display: none; 
 
}

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
 

 
<!--<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>-->

ありがとうございました。

Answer 1

あなたは一歩足りません。要素を作成した後に要素を追加する必要があります。

var nombre="container-speed"; 
var div = document.createElement('div'); 
div.setAttribute("style", "width: 580px; height: 400px; float: left"); 
div.setAttribute("id", nombre); 
// APPEND ELEMENT TO document.body 
document.body.appendChild(div); 

また、私はあなたのfiddle

あなたの要求ごとに更新され、私はfiddleもう一度更新：ここにあなたのコードの始まりです。私は3つの変更を加えました。そのうちの1つだけが本当に重要でした。

1. 宣言し、値の名前が要素のIDとして使用し、grafica() var name = "chart-" + i;
2. の引数としてsetAttribute最も重要な
3. *** div.setAttribute("id", name);に変更されるように、あなたはすべての場所でnameに変数​​を変えたが、ここにあなたが言うことができるvar chartSpeed = Highcharts.chart(name, Highcharts.merge(gaugeOptions, {...、私は更新しました。