Question

我正在尝试从Highcharts获取折线图。我的JSON看起来像

[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}]

Monat意味着月份，我试图获得xAxis的价值。 d07geb是特定月份的金额。

线条画得很完美，高图看起来是正确的。但是，而不是月份，xAxis具有数值。从1. Jan开始，下一个条目是00：00：00.001。

我很陌生。我设法使用饼图和柱形图。但这一个让我疯狂

    $(function () {
    var chart;
    var myJson =  
[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}] 
    $(document).ready(function() {

        var options = {
        chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Money per Month'
            },
             xAxis: {
            type: 'datetime'},
            tooltip: {
     formatter: function() {
        return '<b>'+ this.point.name;
     }
  },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name;
                        }
                    }
                }
            },
            series: []

    };

        var seriesNew = {
                type: 'line',
                name: 'value',
                data: []
            };



        jQuery.each(myJson, function (itemNo, item) {
            seriesNew.data.push([
               item.Monat,
               item.d07geb
            ])
        });

        options.series.push(seriesNew);      
        chart = new Highcharts.Chart(options);

    });

});

Answer 1

你能否分开你的x轴标签和你的数据值？

如果这是一个选项，你可以这样做：

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]

Answer 2

如果您的xAxis设置为datetime，那么您的JSON需要JS时间戳（Unixtime * 1000）。我建议你使用类别作为xAxis：

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

然后，您还必须更改您的JSON以提供从1月到12月排序的12个值。

Highcharts线图，从JSON填充xAxis

2 个答案: