highcharts Highchart基本列时间敏感性并排比较

zkure5ic  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(168)

我有一组数据要绘制到highcharts中:
系列1:

0
: 
{tbldate: "1665545400000", tbldata: 39.960960388183594}
1
: 
{tbldate: "1665547200000", tbldata: 2.3699917793273926}
2
: 
{tbldate: "1665550800000", tbldata: 55.46766662597656}
3
: 
{tbldate: "1665554400000", tbldata: 90.57756042480469}
4
: 
{tbldate: "1665558000000", tbldata: 53.59600067138672}
5
: 
{tbldate: "1665561600000", tbldata: 60.070308685302734}

和系列2:

0
: 
{tbldate: "1665631800000", tbldata: 18.298175811767578}
1
: 
{tbldate: "1665633600000", tbldata: 90.40299224853516}
2
: 
{tbldate: "1665637200000", tbldata: 9.714997291564941}
3
: 
{tbldate: "1665640800000", tbldata: 13.358141899108887}
4
: 
{tbldate: "1665644400000", tbldata: 39.14616012573242}
5
: 
{tbldate: "1665648000000", tbldata: 76.88685607910156}

基本上,系列1包含日期为今天的数据,我想将其与系列2进行比较,后者包含日期为昨天的数据。
我似乎不能像这里的例子https://www.highcharts.com/demo/column-basic那样并排比较图表,因为我的数据对时间很敏感。
我试过使用linkedTo,但似乎不起作用
下面我包括我的图表选项:

chartOptions = {
    chart: {
      type: "column",
      height: "500px",
      zoomType: "x",
    },
    exporting: {
      enabled: false,
    },
    title: {
      text: "Energy Usage Comparison",
      float: true,
      style: { color: "#333333", fontSize: "12px" },
    },
    xAxis: {
      type: "datetime",
      title: {
        text: null,
      },
      tickWidth: 0,
      reversed: false,
      labels: {
        y: 15,
      },
      minPadding: 0,
      maxPadding: 0,
      startOnTick: true,
      endOnTick: true,
      gridLineWidth: 0,
      showLastLabel: true,  
    },
    yAxis: {
      min: 0,
      title: {
        text: "",
      },
    },
    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat:
        '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.2f} mm</b></td></tr>',
      footerFormat: "</table>",
      shared: true,
      useHTML: true,
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0,
      },
    },
    series: [{}],
  };

这是我的chartoption.series的样子:

this.chartOptions.series = [
        {
          type: "column",
          name: "Current",
          color: "#72A2C0",
          data: tempCurrent[0].data,
          columnOffset: 0,
        },
        {
          linkedTo: ":previous",
          type: "column",
          name: "Previous",
          color: "#192E5B",
          data: tempPrevious[0].data,
          columnOffset: 1,
        },
      ];
gr8qqesn

gr8qqesn1#

最简单的解决方案是对数据进行预处理,以调整x值,并在工具提示中显示正确的值。例如:

const data1 = [{
  tbldate: "1665545400000",
  tbldata: 39.960960388183594
}, ...];

const data2 = [{
  tbldate: "1665631800000",
  tbldata: 18.298175811767578
}, ...];

const oneDay = 1000 * 60 * 60 * 24;

Highcharts.chart('container', {
  chart: {
    type: "column"
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: data1.map(dataEl => [+dataEl.tbldate, dataEl.tbldata])
  }, {
    data: data2.map(dataEl => [dataEl.tbldate - oneDay, dataEl.tbldata])
  }],
  tooltip: {
    formatter: function(tooltip) {
      const series = this.series;
      const date = this.x;
      const point = tooltip.bodyFormatter([this]);
      const header = tooltip.tooltipFooterHeaderFormatter(
        series.index === 1 ? {
          ...this,
          key: this.key + oneDay
        } :
        this
      );

      return header + point;
    }
  },
});

现场演示:http://jsfiddle.net/BlackLabel/e37b518u/
API引用:https://api.highcharts.com/highcharts/tooltip.formatter

相关问题