如何显示饼图上的多个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

回答

相关问题