HighChart - 按天对数据进行分组

Question

我有一个包含 3 个系列和每个系列 4 个点的图表。每个点对应 4 个不同的天（每天一个点）。也就是说，每天总共有 3 分，因为它们是 3 个系列。但这3点在时、分、秒上有所不同。

\n\n

我想要做的是将这些数据保留在 X 轴中以在工具提示中显示它，但 3 个点是对齐的。

\n\n

让我们用例子来展示它。

\n\n

这就是我目前所拥有的：

\n\n

    chart = new Highcharts.StockChart({\n\n        chart: {\n            renderTo: "container",\n            type: \'spline\'\n        },\n\n        colors: [\'#3131F8\', \'#FB1C1C\', \'#008000\', \'#f7a35c\', \'#8085e9\',\n            \'#f15c80\', \'#e4d354\', \'#8085e8\', \'#8d4653\', \'#91e8e1\'],\n\n        yAxis: {\n            opposite: false,\n            showLastLabel: true,\n            labels: {\n                enabled: true,\n                align: "right"\n            },\n\n            title: {\n                text: \'Tensi\xc3\xb3n\'\n            }\n        },\n\n        rangeSelector: {\n            enabled:  true\n        },\n\n        tooltip: {\n            pointFormatter: function () {\n                var n = this.series.name;\n                var s = \'<span style="color:\' + this.series.color + \'">\' + this.series.name + \'</span>: <b>\';\n                    return s + Highcharts.numberFormat((this.y / 1000), 2, \'.\') + \' kV</b><br/>\';\n            }\n        },\n\n        legend: {\n            enabled: true\n        },\n\n        navigation: {\n            buttonOptions: {\n                enabled: true\n            }\n        },\n\n        series: [{"name":"Minima","pointInterval":86400000,"data":[[1538467200000,215.9],[1538581500000,217.6],[1538651700000,218],[1538728200000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538506800000,228.8],[1538530200000,228.4],[1538676000000,229.3],[1538779500000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]\n    });\n

\n\n

http://jsfiddle.net/ZottoSL/8vedjxLs/5/

\n\n

这就是我想要的（我修改了数据中的X点以达到视觉效果，但实际上我想保留它）：

\n\n

    chart = new Highcharts.StockChart({\n\n        chart: {\n            renderTo: "container",\n            type: \'spline\'\n        },\n\n        colors: [\'#3131F8\', \'#FB1C1C\', \'#008000\', \'#f7a35c\', \'#8085e9\',\n            \'#f15c80\', \'#e4d354\', \'#8085e8\', \'#8d4653\', \'#91e8e1\'],\n\n        yAxis: {\n            opposite: false,\n            showLastLabel: true,\n            labels: {\n                enabled: true,\n                align: "right"\n            },\n\n            title: {\n                text: \'Tensi\xc3\xb3n\'\n            }\n        },\n\n        rangeSelector: {\n            enabled:  true\n        },\n\n        tooltip: {\n            pointFormatter: function () {\n                var n = this.series.name;\n                var s = \'<span style="color:\' + this.series.color + \'">\' + this.series.name + \'</span>: <b>\';\n                    return s + Highcharts.numberFormat((this.y / 1000), 2, \'.\') + \' kV</b><br/>\';\n            }\n        },\n\n        legend: {\n            enabled: true\n        },\n\n        navigation: {\n            buttonOptions: {\n                enabled: true\n            }\n        },\n\n        series: [{"name":"Minima","pointInterval":86400000,"data":[[1538438400000,215.9],[1538524800000,217.6],[1538611200000,218],[1538697600000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538438400000,228.8],[1538524800000,228.4],[1538611200000,229.3],[1538697600000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]\n    });\n

\n\n

http://jsfiddle.net/ZottoSL/9bk8hq3n/1/

\n\n

也就是说，在X轴上绘制图形时，只考虑年、月、日，区分时、分、秒。

\n\n

谢谢！

\n

Answer 1

您可以使用数据分组来实现所需的外观。这样您就不必进行任何额外的处理。您需要做的就是给出这个定义：

plotOptions: {
  series: {
    dataGrouping: {
      forced: true,
      units: [
        ['day', [1]]
      ]
    }
  }
},

要获取工具提示中该点的实际时间，您可以执行以下操作：

tooltip: {
  pointFormatter: function() {
    var n = this.series.name;
    var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
    return Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index]) + s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
  }
},

从哪里Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index])获取该点的实际时间。

工作 JSFiddle 示例： http://jsfiddle.net/ewolden/omfdy8nc/

数据分组 API： https://api.highcharts.com/highstock/series.line.dataGrouping

为了消除每天进行数据分组时可能在系列之前或之后的额外时间，我们需要设置最小值和最大值。我们有这个空白的原因是因为原始数据的值并未精确设置在每天的午夜。

添加以下load事件将查找最小/最大全天并将xAxis导航器设置xAxis为这些值：

chart: {
  events: {
    load: function() {
      let extremes = this.xAxis[0].getExtremes()
      let min = extremes.dataMin - extremes.dataMin % (1000 * 60 * 60 * 24),
        max = extremes.dataMax - extremes.dataMax % (1000 * 60 * 60 * 24);
      this.update({
        xAxis: {
          min: min,
          max: max
        },
        navigator: {
          xAxis: {
            min: min,
            max: max
          }
        }
      }, true, false, false)
    }
  }
},

工作示例： http: //jsfiddle.net/ewolden/omfdy8nc/32/

加载事件的 API： https: //api.highcharts.com/highstock/chart.events.load

Chart.update 上的 API： https ://api.highcharts.com/class-reference/Highcharts.Chart#update