添加數據集條形圖 - chart.js之

Question

I'm tryng使在chart.js之柱狀圖（使用chart.js之2.2.2）

I'm麻煩試圖把新的數據集在圖表中

我如何可以把一個新的數據集「Vendas」的數據：[10,20,30,40,50,60,70]

var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "Compras", 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
       ], 
       borderWidth: 1, 
       data: [65, 59, 80, 81, 56, 55, 40], 
      } 
     ] 
    }; 
var ctx = $("#barOrgaoAno").get(0).getContext("2d"); 
     var myBarChart = new Chart(ctx,{ 
      type: "bar", 
      data: data, 
}); 

我試過兩個例子我得到了在互聯網，但我不能不能工作

例1

barChartDemo.addData([dData()], "dD " + index); 

Exemple2

JSFLiddle

var myNewDataset = { 
     label: "My Second dataset", 
     fillColor: "rgba(187,205,151,0.5)", 
     strokeColor: "rgba(187,205,151,0.8)", 
     highlightFill: "rgba(187,205,151,0.75)", 
     highlightStroke: "rgba(187,205,151,1)", 
     data: [48, 40, 19, 86, 27, 90, 28] 
    } 

    var bars = [] 
    myNewDataset.data.forEach(function (value, i) { 
     bars.push(new myBarChart.BarClass({ 
      value: value, 
      label: myBarChart.datasets[0].bars[i].label, 
      x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i), 
      y: myBarChart.scale.endPoint, 
      width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1), 
      base: myBarChart.scale.endPoint, 
      strokeColor: myNewDataset.strokeColor, 
      fillColor: myNewDataset.fillColor 
     })) 
    }) 

    myBarChart.datasets.push({ 
     bars: bars 
    }) 

    myBarChart.update(); 

Answer 1

既然你存儲在一個變量（在你的代碼中調用data）的圖表數據，你可以用一個按鈕一個簡單的功能做到這一點：

$('button').click(function() { 
    // You create the new dataset `Vendas` with new data and color to differentiate 
    var newDataset = { 
     label: "Vendas", 
     backgroundColor: 'rgba(99, 255, 132, 0.2)', 
     borderColor: 'rgba(99, 255, 132, 1)', 
     borderWidth: 1, 
     data: [10, 20, 30, 40, 50, 60, 70], 
    } 

    // You add the newly created dataset to the list of `data` 
    data.datasets.push(newDataset); 

    // You update the chart to take into account the new dataset 
    myBarChart.update(); 
}); 

---

你可以看到完整的代碼 on this jsFiddle和這裏是它的結果在點擊後：

Answer 2

只是注意，你說你正在使用2.2.2，但你的小提琴包括1.0.2。

最起碼你只需要這在開始添加到數據集的數組：如果你只需要Compras和Vendas

{ 
    label: "Vendas", 
    data: [10, 20, 30, 40, 50, 60, 70] 
} 

的話，那麼整個事情看起來像：

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: "Compras", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, { 
     label: "Vendas", 
     data: [10, 20, 30, 40, 50, 60, 70] 
    } 

    ] 
}; 

var ctx = document.getElementById("chart"); 

var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

這意味着你可以從你的小提琴中擺脫「我的第二個數據集」和超時功能。