Question

大家好，所以我使用Chart.js创建一个饼图，并从数据库中获取数据：

＆＃13;

<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>

＆＃13;

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

＆＃13;

所以你们可以在脚本行中看到：

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

这将仅查看一列..我如何写，所以它将显示另外3列

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

目前，饼图仅显示来自一列的数据

Answer 1

饼图只是标签和数据之间的一对一关系。在您的示例中，您的标签是：

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，我在

中对数据数组进行了硬编码

Answer 2

您可以将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);

它将绘制一个饼图。您可以从google charts api

学到的其他所有内容

如何在饼图

2 个答案: