使用json響應在chart.js中繪製折線圖

<script type="text/javascript"> 
      $(function() { 
       $.ajax({ 
        type: "POST", 
        url: "BillnAmount", 
        cache: false, 
        dataType: 'json', 
        success: function(data) { 
         console.log(data); 

         var data = { 
          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: [65, 59, 80, 81, 56, 55, 40] 
           }, 
           { 
            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: [28, 48, 40, 19, 86, 27, 90] 
           } 
          ] 
         }; 
         var ctx = $("#myChart").get(0).getContext("2d"); 
         var myNewChart = new Chart(ctx); 
         var myLineChart = new Chart(ctx).Line(data); 
        } 
       }); 
      }); 
     </script>

我正在使用ajax調用url並以json格式獲取其響應。使用json響應在chart.js中繪製折線圖

在ajax調用我正在繪製與Chart.js正在工作的折線圖。

現在我想改變上面的圖表值與JSON響應數據的json響應值

{"billDetails": 
[{"invoiceDate":"2014-07-24T00:00:00","totalAmount":1031.00,"totalBills":1}, 
{"invoiceDate":"2014-07-15T00:00:00","totalAmount":7281.00,"totalBills":3}, 
{"invoiceDate":"2014-07-12T00:00:00","totalAmount":14841.00,"totalBills":7}, 
{"invoiceDate":"2014-07-11T00:00:00","totalAmount":1294.00,"totalBills":3}, 
{"invoiceDate":"2014-07-10T00:00:00","totalAmount":674.00,"totalBills":3}, 
{"invoiceDate":"2014-07-09T00:00:00","totalAmount":2.00,"totalBills":1}, 
{"totalAmount":114.00,"totalBills":10}]}

我應該做什麼樣的變化，所以必須從JSON響應顯示數據

編輯： 我試過這個

var data1; 
    $.each(data.billDetails, function(i, value) { 
         data1 = { 
          labels: data.billDetails[i].invoiceDate, 
          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: data.billDetails[i].totalBills 
           }, 
           { 
            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: data.billDetails[i].totalAmount 
           } 
          ] 
         }; 
        });

在控制檯上顯示如下

個

Uncaught TypeError: Cannot read property 'x' of undefined

我的格式數據

2014-07-24T00:00:00 1 1031 
2014-07-15T00:00:00 3 7281 
2014-07-12T00:00:00 7 14841 
2014-07-11T00:00:00 3 1294 
2014-07-10T00:00:00 3 674 
2014-07-09T00:00:00 11 116

它是隻顯示如下圖

enter image description here

來源

2014-07-24 xrcwrn

這不是一個代碼寫入服務。你有什麼嘗試？你的問題在哪裏？ – RoToRa

@RoToRa請參閱我的更新 – xrcwrn

錯誤意味着你有一個名爲'x'的變量/屬性。你需要找出錯誤發生在哪一行。 – RoToRa

你在正確的軌道上，你將不得不遍歷您的JSON並將其轉換爲結構圖.js將理解。

你應該包含所有靜態信息的空結構開始：

var chartData = { 
    labels: [], // currently empty will contain all the labels for the data points 
    datasets: [ 
    { 
     label: "Total Bills", 
     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: [] // currently empty will contain all the data points for bills 
    }, 
    { 
     label: "Total Amount", 
     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: [] // currently empty will contain all the data points for bills 
    } 
    ] 
};

到目前爲止，這將不打印圖表，但它包含了所有必要的信息，如行標籤和顏色。

現在在你的數組遍歷：

$.each(data.billDetails, function(position, billDetail) { 
    // first use the invoiceDate as a label 
    if (billDetail.invoiceDate) { 
    // You should probably format that 
    chartData.labels.push(billDetail.invoiceDate); 
    } else { 
    // your last data entry doesn't have an invoiceDate 
    chartData.labels.push(''); // blank or think of something creative 
    } 

    // add the totalBills and totalAmount to the dataset 
    chartData.datasets[0].data.push(billDetail.totalBills); 
    chartData.datasets[1].data.push(billDetail.totalAmount); 
});

現在你可以讓chart.js之呈現chartData。

來源

2014-07-26 17:22:45

我再次嘗試上面它顯示未捕獲TypeError：無法讀取在Chart.js未定義的屬性'x'：2693我嘗試的代碼是http://jsfiddle.net/xrcwrn/t3MVa/ – xrcwrn

不幸的是你的jsfiddle不是幫助。 –

我犯了一個錯誤 - 編輯我的答案使用'Array.push（）'而不是'陣列。pop（）' –

你的JSON結果應該是相同的結構，chardata，然後你在你的反應（在我的情況data.datasets）具有SAM結構喜歡的是那些例子硬編碼的情況下，使這個

var charData = 
    { 
     labels = [\\months] 
     datasets: data.datasets 
    }

。

來源

2015-09-04 20:12:18 RandomBoy

使用json響應在chart.js中繪製折線圖

回答

相關問題