如何顯示餅圖上的多個json_encode

人喜用chart.js之創建一個餅圖和IM從數據庫中獲取數據，以便即時通訊：如何顯示餅圖上的多個json_encode

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 

 
<script> 
 
var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'pie', 
 
    data: { 
 
     labels: ["Questions Asked", "Low Confidence", "No Answer", "Missing Intent"], 
 
     datasets: [{ 
 
      label: '#', 
 
      data: {!! json_encode($data) !!}, 
 
      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)' 
 
      ], 
 
      borderColor: [ 
 
       'rgba(255,99,132,1)', 
 
       'rgba(54, 162, 235, 1)', 
 
       'rgba(255, 206, 86, 1)', 
 
       'rgba(75, 192, 192, 1)' 
 
      ], 
 
     }] 
 
    }, 
 
    options: { 
 

 
    } 
 
}); 
 
</script>

<canvas id="myChart" width="400" height="400"></canvas>

使你們可以在腳本行看到：

data: {!! json_encode($data) !!}，

這會認爲只有一列..我怎樣寫，所以我噸將顯示另一3個欄，其是

{!! json_encode($data1) !!}，{!! json_encode($data2) !!}，{!! json_encode($data3) !!}

從一列

來源

2017-10-09 anon

你的代碼片段甚至不運行 –

餅圖目前餅圖僅示出數據是僅一個標籤和數據之間一對一的關係。在您的例子您的標籤是：

labels: ["Questions Asked", "Low Confidence", "No Answer", "Missing Intent"]

你的數據應該是這樣的一個數組：

data: [5, 2, 6, 6]

那麼，你是從服務器獲取什麼都需要在像上面的陣列格式。

看一看example on the chartjs website。您可以通過在瀏覽器中打開開發者工具來查看代碼。

或者更好的，通過documentation of pie charts on chartjs website

讀到這裏是一個jsfiddle with your code，我硬編碼在

來源

2017-10-09 04:54:40 tyelford

是的，我知道[5,2,6,6]所以這就是我的問題我怎麼能用上面的代碼編寫格式？ – anon

我得到你在jsfiddle中的意思，但我不希望它被硬編碼，而是動態調用數據庫中的數據 – anon

data：{！ json_encode（$ data）!!}，上面這一行返回一列數據，但我需要調用其他3列，我該怎麼做？ – anon

數據陣列可以使用google charts爲了同樣的目的。它們很容易處理，並且可以像您一樣進行修改。爲動態數據運行for循環4次或data.length次並使用data.addRow（）方法。您將能夠通過它的文檔來了解也行，如果沒有，這裏有一些修改，我可以幫：

var charts = new google.visualization.DataTable(); 
charts.addColumn('number','questions asked'); 
charts.addColumn('number','no answer'); 
charts.addColumn('number','missing intent'); 

for(var i=0;i<4;i++) 
{ 
    charts.addRow([$data0])//it should be of array type,so manage it on your own 
} 
var options = {'title':'anyTitle', 'width':610, 'height':390,legend: {position: 'none'}}; 

var chart = new google.visualization.PieChart(document.getElementById('Canvas')); 
    chart.draw(data, options);

它將繪製餅圖。一切你可以從谷歌圖表API學習

來源

2017-10-10 08:19:08 utkarsh

如何顯示餅圖上的多個json_encode

回答

相關問題