Question

我正在尝试生成多轴图表，如下图所示。但它不起作用，阵列生成都很好。

如果我硬编码totalNoOfLabels和totalLabelsSize那么它的工作原理。请建议：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

$(function () {
var result=[{"date":"2013-05-01","propertiesList":   {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}];

var totalNoOfLabels=[];
var totalLabelsSize=[];
var dates=[];

dailyStatList = JSON.stringify(result);             
            var statsObj = $.parseJSON(dailyStatList);
            $.each(statsObj, function() {
                dates.push(this.date);
                    totalNoOfLabels.push(this.propertiesList.labelsCount);
                totalLabelsSize.push(this.propertiesList.totalSize);
            });

    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Info'
        },

        xAxis: [{
            categories: dates
        }],
        yAxis: [{ // Primary yAxis
            labels: {

                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'No of labels',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Size ',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {

                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Labels',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: totalNoOfLabels


        }, {
            name: 'Size',
            color: '#89A54E',
            type: 'spline',
            data: totalLabelsSize

        }]
     });
  });

Answer 1

labelsCount和totalSize应该是数字，而不是字符串。解析这些值，或者将JSON作为数字放入并且可以正常工作。

带有动态数据的多轴的高图表问题

1 个答案: