php - 值不显示在 Highcharts 中

Question

JSON 输出:(来自 dt.php)

[{
    "name":"Year",
    "data":[2012,2013]
},{
    "name":"A",
    "date":[111,24]
},{
    "name":"B",
    "date":[34,0]
},{
    "name":"C",
    "date":[365,43]
},{
    "name":"D",
    "date":[496,0]
}]

Javascript:

    $(document).ready(function() {
        var chart;

        var option = {
            chart: {
            renderTo: 'hcChart',
            type: 'column'
        },
        title: {
            text: 'Testing'
        },
        xAxis: {
            categories: []
        },
        series: []
        };

        $.getJSON("dt.php", function(json) {
            option.xAxis.categories = json[0]['data'];
            option.series[0] = json[1];
            option.series[1] = json[2];
            option.series[2] = json[3];
            option.series[3] = json[4];
            chart = new Highcharts.Chart(option);
        });
    });

图表确实显示了图例，但没有显示单个值。有帮助吗？

Answer 1

将日期更改为数据:

[{"name":"Year","data":[2012,2013]},{"name":"A","data":[111,24]},{"name":"B","data":[34,0]},{"name":"C","data":[365,43]},{"name":"D","data":[496,0]}]

还记得将图表渲染到 div id。 option.chart.renderTo = 'myChart';

工作示例:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        var chart;

        var option = {
            chart: {
                renderTo: 'hcChart',
                type: 'column'
            },
            title: {
                text: 'Testing'
            },
            xAxis: {
                categories: []
            },
            series: []
        };

        $.getJSON("dt.php", function (json) {
            option.xAxis.categories = json[0]['data'];
            console.log(json);
            option.series[0] = json[1];
            option.series[1] = json[2];
            option.series[2] = json[3];
            option.series[3] = json[4];
            option.chart.renderTo = 'myChart';
            chart = new Highcharts.Chart(option);
        });
    });
</script>
<div id="myChart"></div>