CanvasJSと複数の円チャート。

ウェブサイトの円グラフを作成する必要があります。私には、必要な数に応じて動的に円グラフをレンダリングできないようです。最大で私は28をレンダリングしなければならない。だから私はタイプアウトしなければならないと考えている。CanvasJSと複数の円チャート。

<script type="text/javascript"> 
window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", 
    { 
     title:{ 
      text: "Gaming Consoles Sold in 2012" 
     }, 
     legend: { 
      maxWidth: 350, 
      itemWidth: 120 
     }, 
     data: [ 
     { 
      type: "pie", 
      showInLegend: true, 
      legendText: "{indexLabel}", 
      dataPoints: [ 
       { y: 4181563, indexLabel: "PlayStation 3" }, 
       { y: 2175498, indexLabel: "Wii" }, 
       { y: 3125844, indexLabel: "Xbox 360" }, 
       { y: 1176121, indexLabel: "Nintendo DS"}, 
       { y: 1727161, indexLabel: "PSP" }, 
       { y: 4303364, indexLabel: "Nintendo 3DS"}, 
       { y: 1717786, indexLabel: "PS Vita"} 
      ] 
     } 
     ] 
    }); 
    chart.render(); 
} 
</script> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

このコードは28回。しかし、時々私は28の円グラフをすべて必要としません。だから私は必要がない場合、円グラフを隠すことができると思っていました。しかし、主な質問は、 "私はcanvasJS円グラフ"を動的に割り当てることができますか？だから私はXの量の円グラフを作ることができる1つの主要なコードブロックしか持っていない。

出典

2017-12-06 MMM333

考えられる考えは、JSファイルの先頭に2つの変数を作成することです。 1つの変数は、canvasJSグラフでいっぱいになるチャートの配列です。 2番目の変数は、グラフに記入するデータの2つのタプルです。タプルは（int、string）になります。次に、簡単なforループを使用してチャートの配列を設定します。 – MMM333

だから元のコメントに従ってください。データセクションの2タプル変数をハードコーディングして、基本的なアイデアを実行しました。したがって、可変データは使用されませんでした。しかし、私は単にチャートの配列を作成するだけで完了しました。 pieContainer + iの命名規則を使用します。私のHTMLコードのどこに。私はコンベンションpieContainer + 1で29のdiv要素を持っています。

var charts = []; 
var data = []; 

function populatePieCharts(size) 
{ 
    for (i = 0; i < size; i++) 
    { 
     console.log("FFFF" + i) 
     charts[i] = new CanvasJS.Chart("pieContainer" + i, 
      { 
       title: { 
        text: i 
       }, 
       legend: { 
        maxWidth: 350, 
        itemWidth: 120 
       }, 
       data: [ 
        { 
         type:"pie", 
         showInLegend: true, 
         legendText: "{indexLabel}", 
         dataPoints: [ 
          { y: 4181563, indexLabel: "PlayStation 3" }, 
          { y: 2175498, indexLabel: "Wii" }, 
          { y: 3125844, indexLabel: "Xbox 360" }, 
          { y: 1176121, indexLabel: "Nintendo DS" } 
         ] 
        }] 
      }); 
    } 
    renderCharts(size) 
} 
function renderCharts(chartAmount) 
{ 
    console.log(charts.length); 
    for (i2 = 0; i2 < chartAmount; i2++) 
    { 
     charts[i2].render(); 
     console.log(i2); 
    } 
}

これは私を別のステップに導きます。 29 div要素をハードコーディングする代わりに。おそらく、必要な円グラフに基づいてdiv要素を動的に作成することができます。

出典

2017-12-06 16:23:00 MMM333

CanvasJSと複数の円チャート。

答えて

関連する問題