web-dev-qa-db-ja.com

chart.js折れ線グラフのデータセットを動的に作成する方法は？

Chart.jsライブラリーに動的に複数のデータセットを持つ折れ線グラフを作成したい。

データを動的に割り当てることができます。しかし、データセット自体を動的に作成したいと思います。私は以下のリンクを見ました：

chart.jsのHTMLテーブルから要素を動的に追加する方法

これを試してみました：

var datasetValue = [];
for (var j = 0; j < count; j++) {
datasetValue[j] = [
{
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)' ,
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}]
}

var mydata = {
datasets : datasetValue
}

ここでは、カウント値は3です。グラフに3本の線を表示すると、カウント値が変化します。チャートの線の色とタイトルは同じになりますが、最初に線を表示し、解決したら残りを変更します。

私はそのようにデータにアクセスしようとしました：

alert("Datasets:"+mydata.datasets[0].data);

最初のデータセットのデータが表示されるはずですが、undefinedが表示されています。

ただし、以下の場合：

var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        data : [95,53,99,73,27,82,40],
        title : "2014"
    },
    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        data : [35,43,59,31,50,66,55],
        title : "2013"
    }
 ]
}

alert("Datasets:"+mydata1.datasets[0].data);

最初のデータセットのデータを取得することができます。誰か私に解決策を教えてくれませんか？

javascriptjquerychart.js
9
Suresh

次の解決策のようなものを探していると思います。 http://jsfiddle.net/5m63232a/

var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
    datasetValue[j] = {
        fillColor: 'rgba(220,220,220,0.5)',
        strokeColor :'rgba(220,220,220,1)',
        title :'2013',
        data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
    }
}
var mydata = {
    datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);
14
Bear GRiZZLY Xi

次のようにjsonフォームをフェッチするサービスを作成します。

labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(220,220,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
        ]

次に、次のJavaScriptコードを追加します

var j = [];
$.ajax({
    type: 'GET',
    url: 'http://' + window.location.Host.toString() + "/path",
    dataType: 'json',
    success: function (data) {
       j = data;
    },
    async: false
 });
 var chartData = {
     labels: j.labels,
     datasets: j.datasets
 };
 window.onload = function () {
     var ctx = document.getElementById("canvas").getContext("2d");
     window.myLine = new Chart(ctx).Line(chartData, {
         responsive: true,
         animation: true,
         tooltipFillColor: "rgba(0,0,0,0.8)",
         multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>"
     });
 }
6
developerbhuwan