具有JSON数据和多个系列的Highcharts

I'm trying to render a Highcharts line chart, but am having some issues getting the series to show up when the page loads. Firebug doesn't show any errors, so I'm guessing that it's a problem with how my data is structured or how it is being passed to Highcharts.

我正在尝试渲染Highcharts折线图,但是在页面加载时出现一些问题让系列显示出来。 Firebug没有显示任何错误,所以我猜测这是我的数据结构或如何传递给Highcharts的问题。

The data comes from a JSON file, with the variables being loaded using a method I got from another site... My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.

数据来自JSON文件,变量使用我从另一个站点获得的方法加载...我的数据是每个月的数字y值,customTooltip是我想在悬停时显示的其他数据。

$.getJSON("json/mydata.txt",function(jdata) {

var arr = [];
$.each(jdata, function(key, val) {
    var y = val.y;
    var name = key;
    var customTooltip = val.n;
    arr.push({y: y, customTooltip: customTooltip})
})

var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]};

var options = {
            chart: {
                renderTo: 'fallcontainer',
                defaultSeriesType: 'line'
                },
            title: {
                text: 'Monthly Rate',
                style: {
                    margin: '10px 100px 0 0' // center it
                }
                },
            subtitle: {
                text: 'Source',
                style: {
                    margin: '0 100px 0 0' // center it
                }
                },
            xAxis: {

                categories: ['Jan 12', 'Feb 12', 'Mar 12']
                },
            yAxis: {
                title: {
                    text: 'Rate',
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }],
                min:0
                },
            legend: {
                layout: 'vertical',
                align:'right',
                verticalAlign:'middle',
                x:0,
                title:'Care Setting'
                },
            plotOptions: {
                },
            credits: {
                enabled:false
                },
            series:[]
};

options.series.push(jseries);

var chart = new Highcharts.Chart(options);

});

Here's a better example. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. JSONLint said this is valid.

这是一个更好的例子。我真正想要显示的是'y'作为y轴,悬停时带有'n'和'y'数据。 JSONLint说这是有效的。

{
"Total": {
    "y": [
        9.39,
        90.35,
        90.36,
        92.69,
        93.02,
        90.32,
        90.6,
        9.09,
        9.5,
        90.69,
        9.6,
        90.69,
        9.53,
        6.92
    ],
    "name": "Total",
    "n": [
        962,
        969,
        999,
        233,
        235,
        968,
        999,
        963,
        989,
        293,
        986,
        293,
        989,
        908
    ]
},
"Cat1": {
    "y": [
        6.38,
        6.63,
        90.3,
        9.65,
        90.25,
        8.99,
        92.39,
        99.39,
        9.28,
        99.35,
        99.36,
        93.38,
        8.69,
        8.03
    ],
    "name": "Cat1",
    "n": [
        6,
        6,
        90,
        90,
        90,
        8,
        93,
        93,
        99,
        93,
        93,
        96,
        99,
        9
    ]
}
}

1 个解决方案

#1

You should look at this: http://api.highcharts.com/highcharts#series.data

你应该看看这个:http://api.highcharts.com/highcharts#series.data

If you specify each point as an object, you can add any property you want to each point and access it in your tooltip formatter through this.point.

如果将每个点指定为对象,则可以向每个点添加所需的任何属性,并通过this.point在工具提示格式化程序中访问它。

With the data as currently formatted

使用当前格式化的数据

var seriesArr = [];
$.each(jdata, function(key, data) {
  var series = {name : key, data : []};

  $.each(data.y, function(index, value) {
    series.data.push({y: value });
  });

  $.each(data.n, function(index, value) {
    series.data[index].n = value;
  });
  seriesArr.push(series);
});

This should yield :

这应该产生:

seriesArr : [{
    name : 'Total',
    data : [
      {y:9.39, n:9.62},
      ...
    ]
  },
...
]

Then in your formatter function, you can acccess each as this.point.y or this.point.n

然后在你的格式化函数中,你可以将每个作为this.point.y或this.point.n来访问

tooltip: {
  formatter: function () {
    return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
  }
},

Working: http://jsfiddle.net/sgearhart2/9P5fC/

#1