【问题标题】:Highcharts with JSON to customize multiple series使用 JSON 自定义多个系列的 Highcharts
【发布时间】:2013-03-26 08:48:26
【问题描述】:

我想从一个有 4 列(日期、打开事件、已关闭事件和进行中事件)的 json 文件在我的图表中添加多个系列。
我可以用打开的事件数 (http://jsfiddle.net/269us/) 显示我的图表,但我找不到 JSON 文件的第 3 列和第 4 列。

这是我的 JSON 文件的结构:

[[1325462400000,3,12,14]
 [1325548800000,7,14,8]
 [1325635200000,10,11,24]
 [1325721600000,21,13,16]
 [1325808000000,13,15,9]
 [1325894400000,2,15,4]
 [1326067200000,10,13,15]]

我想通过这种类型来访问以自定义每个系列(打开、关闭、进行中)

var date = []
   open = []
   close = []
   inprogress = []
   datalength = data.length;

for (i = 0; i <dataLength; i + +) {
    date.push ([
         data [i] [0]
    ]);

    open.push ([
         data [i] [1],
    ]);

    close.push ([
         data [i] [2],
    ]);

    inprogress.push ([
         data [i] [3],
    ]);

    }

    series: [{
       type: 'spline',
       name: 'open',
       data: open,
       dataGrouping {
              units: groupingUnits
       }
   } {
       type: 'column',
       name: 'close',
       data: close,
       dataGrouping {
              units: groupingUnits
       }

      .............
      .............

   }]

【问题讨论】:

    标签: javascript json highcharts


    【解决方案1】:

    我认为您正在尝试创建 3 个数据数组以用于 3 个系列(打开、关闭和进行中)。试试这样的:

    for (i = 0; i <dataLength; i + +) {
        var date = data[i][0];
        open.push ([
             date,
             data[i][1]
        ]);
    
        close.push ([
             data,data[i][2] //data instead of dat.
        ]);
    
        inprogress.push ([
             date,data[i][3]
        ]);
    }
    

    您现在应该可以将这 3 个数组用作您的系列中的数据:

    series: [{
       type: 'spline',
       name: 'open',
       data: open,
       dataGrouping {
              units: groupingUnits
       }
    },
    {
       type: 'column',
       name: 'close',
       data: close,
       dataGrouping {
              units: groupingUnits
       }
    },
    {
       type: 'line',
       name: 'inprogress',
       data: inprogess,
       dataGrouping {
              units: groupingUnits
       }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-05-23
      • 2019-12-08
      • 2013-05-25
      • 1970-01-01
      相关资源
      最近更新 更多