我正试图通过使用"linkedTo"属性来比较单个图表中的两个不同日期间隔数据(为了在图例中消失并显示两行，因为它们是相关的(
我的问题：两个系列自动在中间对齐(Fiddle Link Here(
以下是我的选择：
Highcharts.chart('container', {
xAxis: [{
tickInterval: 1,
left: 0
},
{
type: 'datetime',
categories: ['4/18/2018', '4/19/2018', '4/20/2018', '4/21/2018', '4/22/2018', '4/23/2018'],
visible: false,
left: 0,
labels: {
formatter: function() {
return Highcharts.dateFormat('%b/%e/%Y', this.value);
}
}
},
{
type: 'datetime',
categories: ['5/2/2018', '5/3/2018', '5/4/2018'],
visible: false,
}
],
yAxis: [{
type: 'value',
visible: false
},
],
series: [{
name: 'instance1',
key: 'instance1',
type: 'line',
data: [1, 5, 2, 2, 8, 6
],
xAxis: 1
},
{
name: 'instance1 compared',
linkedTo: 'instance1',
dashStyle: 'shortdash',
type: 'line',
data: [
8, 3, 6
],
xAxis: 2
}
],
tooltip: {
crosshairs: true,
shared: true,
useHTML: true,
headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
pointFormat: '<tr><td>{series.name} </td> <td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>'
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>我想要的是这样的东西：其中日子一起打勾，短系列在另一个之前停止
我尝试将这两个系列链接到一个xAxis中，该xAxis将天数作为图片进行跟踪。这在一定程度上使点对齐，但随后我无法将单独的日期数据发送到工具提示。如何设置工具提示的格式？
我试图在网上找到的另一个解决方案是，如果有任何方法可以在高图中链接三个数据，那么我可以将天数用作一个xAxis，并将日期数据单独放在工具提示中。例如：(125次点击，2022年8月1日，第2天(
将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一起使用，而不是密钥。
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