javascript-在Highcharts中使用带有堆积列的网格图

前端之家收集整理的这篇文章主要介绍了javascript-在Highcharts中使用带有堆积列的网格图 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个时间序列数据,想要显示为网格图:

这是Highcharts网站的网格图基本版本:

enter image description here

我正在代替Erik,Gert,Helge,Torstein,而是将其替换为以下组:Client,DII,FII,PRO.

在下面的图表中,水果名称是一个简单的序列,但在这里我有一个时间序列数据:Fut Index Longs和Fut Index Shorts.
以上每个分组(客户,DII …)都有自己的Fut Index Long和Fut Index Shorts版本.

我想将Fut Index Longs,Fut Index Shorts与x轴表示不同的日期堆叠在一起显示.

我试图使用嵌套序列来完成此操作,但是没有数据正在显示.这是我的资料来源:

var charts = [],$containers = $('#trellis td'),datasets = [
    {
        name: 'Client',data: 
            [
                {
                    name: "Fut Index Longs",data: [["2014-02-10",5],["2014-02-11",9],["2014-02-12",7]]
                },{
                    name: "Fut Index Shorts",2]]
                }
            ]
    },{
        name: 'DII',{
        name: 'FII',{
        name: 'PRO',2]]
                }
            ]
    }
];


$.each(datasets,function(i,dataset) {
    charts.push(new Highcharts.Chart({

        chart: {
            renderTo: $containers[i],type: 'bar',marginLeft: i === 0 ? 100 : 10
        },title: {
            text: dataset.name,align: 'left',x: i === 0 ? 90 : 0
        },credits: {
            enabled: false
        },xAxis: {
                    type: 'datetime'
            },yAxis: {
            allowDecimals: false,title: {
                text: null
            },min: 0,max: 10
        },plotOptions: {
        column: {
            stacking: 'normal'
            }
            },legend: {
            enabled: false
        },series: [dataset]

    }));
});

jsfiddle的链接http://jsfiddle.net/g6jLhux2/

我究竟做错了什么?

最佳答案
在您的情况下,您需要使用

series: dataset.data

同样,您的x轴不是日期时间,而是类别,因为应该将日期时间作为数字(毫秒)传递.然后,您必须使用:

xAxis: {
  type: 'category'
},

如果您想在图表中正确显示数据. See updated jsfiddle

有帮助吗?

原文链接:https://www.f2er.com/js/531168.html

猜你在找的JavaScript相关文章