Highcharts多轴冗余时间数据

时间:2017-03-15 23:40:18

标签: datetime highcharts

我正在使用php从MySql数据库获取我的日期时间数据,用于Highchart多轴图表,因此:

while ($row = mysql_fetch_array($result)) {

$voltage = $row['vSmall'];
$loadVoltage = $row['loadVoltageBigPanel'];
$dob = strtotime($row['dob']);
$current = $row['currentBigPanel'];

$dob *= 1000; // convert from Unix timestamp to JavaScript time

   $tData[] = "[$dob,$voltage]";
   $vData[] = "[$dob,$loadVoltage]";
   $cData[] = "[$dob,$current]";

}

这将被插入到图表中:

    series: [{
    type: 'area',
    data: [<?php echo join($tData, ',') ?>],
    tooltip: {
        valueSuffix: ' V'
    }

  },{

    name: 'Load Voltage',
    type: 'area',
    data: [<?php echo join($vData, ',') ?>],
    tooltip: {
        valueSuffix: ' V'
    },

  },{

    name: 'Current',
    type: 'spline',
    lineColor: '#ff0000',
    yAxis: 1,
    lineWidth: 0.5,
    data: [<?php echo join($cData, ',') ?>],
    tooltip: {
        valueSuffix: ' ma',
        borderColor:'#000000',

    }, etc...

显然会导致为每个轴输出相同的日期时间数据,例如

    series: [{
    showInLegend: true,
    type: 'area',
    data: [[1489415941000,5.34],[1489416001000,5.34],[1489416061000,5.33],[1489416121000,5.33],[1489416181000,5.33],[1489416241000,5.32],[1489416301000,5.32],[1489416361000,5.32],[1489416421000,5.32],[1489416481000,5.32]],
    tooltip: {
        valueSuffix: ' V'
    }

  },{

    name: 'Load Voltage',
    type: 'area',
    data: [[1489415941000,8.00],[1489416001000,8.00],[1489416061000,8.00],[1489416121000,8.00],[1489416181000,7.94],[1489416241000,7.98],[1489416301000,7.98],[1489416361000,7.98],[1489416421000,7.98],[1489416481000,7.98]],
    tooltip: {
        valueSuffix: ' V'
    },

  },{

    name: 'Current',
    type: 'spline',
    lineColor: '#ff0000',
    yAxis: 1,
    lineWidth: 0.5,
    data: [[1489415941000,7.10],[1489416001000,7.00],[1489416061000,6.90],[1489416121000,6.80],[1489416181000,5.30],[1489416241000,6.20],[1489416301000,6.50],[1489416361000,6.40],[1489416421000,6.20],[1489416481000,6.10]],
    tooltip: {
        valueSuffix: ' ma',
        borderColor:'#000000',

    },

由于显而易见的原因,我已对此示例应用了查询限制,但可以看出,时间和日期数据不一定会被复制。

我的数据集现在变得相当大,这非常浪费,并且导致javascript事件(例如选择范围)运行得越来越慢。

我想添加更多的轴,但是这对于每个后续轴都要反复输出时间数据会更加浪费。

我用Google搜索,仔细阅读在线文档,并在多个论坛上搜索,但无法找到告诉Highcharts使用datetime的单个输出数组并指示后续轴的方法,“嘿!使用以前的输出日期时间阵!“

我必须遗漏一些明显的东西,因为我看不到开发人员没有处理这种情况,从而导致潜在的大量复制(因此完全冗余)数据输出到页面中

我希望我已经清楚地解释了这一点。希望代码片段说明我在说什么。

最高

1 个答案:

答案 0 :(得分:0)

您的问题令人困惑,部分原因是,当您真正想要的是axis时,您似乎正在使用series这个词。

如果我理解正确,您不希望在每个系列中为每个数据点指定时间戳,因为它们在每个系列中都是相同的。

如果您的时间戳定期发生(例如每天一次,每小时一次,每分钟一次等),您可以使用pointStartpointInterval属性。

pointStart是一个时间戳,指定第一个数据点的日期/时间。

pointInterval是一个以毫秒为单位的数字,用于指定每个点之间的时间量。

然后,您可以提供数据为y值的简单数组,而不是x / y对数组。

参考:

如果您的时间戳不是定期的,那么我所知道的并没有一个干净的解决方案,以及您的观察结果:

  

...但是无法找到告诉Highcharts使用单个输出数组的方法   日期时间,并指示后续轴,“嘿!使用以前的轴   输出datetime数组!“

是否正确 - 没有这样的属性可以告诉不同的系列使用单个x值数组。