Highcharts：如何比较同一折线图中具有不同x轴间隔的两个系列

j1dl9f46 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(234)

我尝试通过使用“linkedTo”属性比较单个图表中的两个不同日期间隔数据（以便在单击图例时消失并显示两条线，因为它们相关）
我的问题：两个系列自动在中间对齐（Fiddle Link Here）
我的选择如下：
第一个
我想要的是这样的东西：Where the days are ticked together and short serie is halted before the other one
我试着将两个系列链接到一个xAxis中，该xAxis将日计数作为图片进行跟踪。这部分地将点对齐在一起，但我无法将单独的日期数据发送到工具提示。我如何设置工具提示的格式？
另一个我尝试在网上找到的解决方案是，如果有任何方法可以在highchart中链接三个数据，那么我可以使用日计数作为单个xAxis，并将日期数据单独放在工具提示中。例如：（125次点击，2022年1月8日，日期：2）的

highcharts

来源：https://stackoverflow.com/questions/73193199/highcharts-how-to-compare-two-series-with-different-xaxis-intervals-in-the-same

1条答案

按热度按时间

oug3syen1#

将max属性添加到具有较少类别的xAxis中，以便使其与另一个属性匹配。

xAxis: [{
      tickInterval: 1
    },
    {
      categories: categories1,
      visible: false
    },
    {
      categories: categories2,
      max: categories1.length - 1,
      visible: false
    }
  ],

  tooltip: {
    crosshairs: true,
    shared: true,
    useHTML: true,
    headerFormat: '<table><tr><th colspan="2">Day {point.point.x}</th></tr>',
    pointFormat: '<tr><td>{point.category} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>'
  },

演示：https://jsfiddle.net/BlackLabel/naes6v89/

您提到的另一种方法是使用series.keys（API：https://api.highcharts.com/highcharts/series.line.keys），但在本例中，这不是必需的。您只需将类别作为point.name传递，然后在tooltip.headerFormat中使用point.x值

tooltip: {
    crosshairs: true,
    shared: true,
    useHTML: true,
    headerFormat: '<table><tr><th colspan="2">Day {point.x}</th></tr>',
    pointFormat: '<tr><td>{point.name} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
  },

  series: [{
      name: 'instance1',
      id: 'instance1',
      data: [
        ['4/18/2018', 1],
        ['4/19/2018', 5],
        ['4/20/2018', 2],
        ['4/21/2018', 2]
      ],
    },
    {
      name: 'instance1 compared',
      linkedTo: 'instance1',
      dashStyle: 'shortdash',
      data: [
        ['5/2/2018', 8],
        ['5/3/2018', 3],
        ['5/4/2018', 6]
      ],
    }
  ]

演示：https://jsfiddle.net/BlackLabel/8xsnr7c9/

请记住，您需要将linkedTo与id一起使用，而不是使用key。

series: [{
      name: 'instance1',
      id: 'instance1',
      data: [1, 5, 2, 2],
      xAxis: 1
    },
    {
      name: 'instance1 compared',
      linkedTo: 'instance1',
      dashStyle: 'shortdash',
      data: [8, 3, 6],
      xAxis: 2
    }
  ]

API参考：https://api.highcharts.com/highcharts/series.line.linkedTo

赞(0）回复(0）举报 2022-11-10

我来回答

Highcharts：如何比较同一折线图中具有不同x轴间隔的两个系列

1条答案

相关问题

热门标签

最新问答