Question

我有问题。我的图表根本没有呈现。

这是服务返回的JSON数据。 [{＆＃34;标签＆＃34;：＆＃34; A＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃34; B＆＃34; ＆＃34; Y＆＃34;：5}，{＆＃34;标签＆＃34;：＆＃34; C＆＃34;＆＃34; Y＆＃34;：2}，{＆＃34;标签＆＃34;：＆＃34; d＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃34; T＆＃34;＆＃34; Y＆＃ 34;：7}] [{＆＃34;标签＆＃34;：＆＃34; A＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃ 34; B＆＃34;＆＃34; Y＆＃34;：5}，{＆＃34;标签＆＃34;：＆＃34; C＆＃34;＆＃34; Y＆＃34;：2}， {＆＃34;标签＆＃34;：＆＃34; d＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃34; T＆＃34 ;, ＆＃34; Y＆＃34;：7}] [{＆＃34;标签＆＃34;：＆＃34; A＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃34; B＆＃34; ＆＃34; Y＆＃34; 10}，{＆＃34;标签＆＃34;：＆＃34; C＆＃34;＆＃34; Y＆＃34：4}，{＆＃34;标签＆＃34;：＆＃34; d＆＃34;＆＃34; Y＆＃34;：0}，{＆＃34;标签＆＃34;：＆＃34; T＆＃34;＆＃34; Y＆＃ 34;：14}]

这是我的代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <script src="jquery/jquery-1.11.1.js"></script>
    <script src="jquery/jquery.canvasjs.min.js"></script>

    <script type='text/javascript'>
       $(document).ready(function () {

       $.getJSON('data.php', function (result) {
        var chart = new CanvasJS.Chart('Container', {
        title:{
            text: 'Results of Survey',
        },
        data: [

        {
            type: 'column',
            dataPoints: result

        }

        ]

    });

    chart.render();

    });



    });

    </script>
    </head>
    <body>

    <div id="Container" style="width: 800px; height: 380px;"></div>

    </body>
    </html>

Answer 1

您的数据格式错误。如果您尝试执行多系列，请参阅此文档：

http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/

此：

    [{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}]
[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7}] 
[{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]

应该是：

[{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]

你有重复的列标签，这就是为什么我提到上面的文档。你想尝试多个系列而不是柱形图吗？

编辑：

假设您正在进行直柱图表，此代码会显示您的数据：

<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "My First Chart in CanvasJS"              
        },
        data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            type: "column",
            dataPoints:  [{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":5},{"label":"C","y":2},{"label":"D","y":0},{"label":"T","y":7},{"label":"A","y":0},{"label":"B","y":10},{"label":"C","y":4},{"label":"D","y":0},{"label":"T","y":14}]
        }
        ]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

为什么我的canvasjs图表没有加载？

1 个答案: