【问题标题】:Highcharts redundant time data with multiple axesHighcharts 多轴冗余时间数据
【发布时间】:2017-03-15 23:40:17
【问题描述】:

我正在使用 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 使用单个日期时间输出数组,并指示后续轴,“嘿!使用以前输出的日期时间数组!”

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

我希望我已经清楚地解释了这一点。希望代码 sn-ps 能说明我在说什么。

最大

【问题讨论】:

  • 我遇到了同样的问题。你找到好的解决方案了吗?我已经知道 pointStart 和 pointInterval 属性(我有 RTFM ;)),但我不能将它应用于我的数据,因为时间间隔并不总是规律的(数据是由有时可能会离线的系统收集的),因此即使您的解决方案 从表中获取第一个和最后一个时间戳,对时差执行计算 也不能适用于我的方案。有什么想法吗?

标签: datetime highcharts


【解决方案1】:

您的问题令人困惑,部分原因是您似乎使用了axis 这个词,而您真正的意思是series

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

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

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

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

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

参考:

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

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

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

【讨论】:

  • 请见谅,我使用了错误的术语,请纠正。我的时间戳目前相隔一分钟,但这很可能会改变,我不能保证它们是等距的。尽管如此,我还是应该从表中获取第一个和最后一个时间戳,对时间差进行计算,然后使用您上面描述的技术。感谢您为我指明正确的方向。最大
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多