Highcharts 高位图表显示交替的x轴

我有一个多y轴和两个x轴的折线图，即时间和距离。我想显示图表，允许用户在两个x轴之间切换。我正在努力研究如何定义图表，以便它将xAxis显示为距离，并尝试在xAxis上将ordinal设置为false，使用类别，指定多个Xaxe，似乎无法破解代码。工作解决方案应该生成链接图片中的两个图形（因为这是我的第一篇文章，我没有在这里发布图像的名声…）

下面是一些简化的代码片段和相关的JSFIDLE供您阅读

$('#container').highcharts({

xAxis: {
    categories: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
    ordinal: false
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}] });

这将产生一个等间距的X轴，其中每个类别元素占据一个位置，即不引入数据序列的“拉伸”

这将在等间距的xAxis值上显示两个系列（JSFIDLE是2142-同样是第一个post，因此只能发布2个链接…）

---

我希望Highcharts能够处理这一点，因为我不希望需要重新计算所有数据点，以在两个不同的XAX之间伪造显示…提前感谢您的帮助。

由于您的基本XAX在图表之间发生变化，您可以尝试完全改变图表。我创建了两个图表选项集和一个按钮来在两者之间切换

$('#btn').click(function () {
    if (set == true) {
    chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartDistance));
        set = false;
    } else {
        chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartSpeed));
        set = true;
    }
});

我很确定jquery中有一些单行代码切换，但现在已经很晚了。

---

下面是一个例子。

非常感谢@wergeld。当我进入切换代码时，这肯定会有所帮助。然而，我面临的问题先于这一问题。我似乎无法创建x轴不增加1并正确缩放序列数据的图形。看到你的小提琴在这里修改了吗。请注意，“速度与距离”图形如何在不“拉伸”序列的情况下，将一个x轴交换为另一个x轴。在本例中，我希望x轴上有56个点，替换速度与秒图表中的12个点。Thanks@RobertVizza，你的问题并不完全清楚。根据您手绘图表的图像，这是在做您希望做的事情-两个图表具有相同的X轴“宽度”。我不知道你说的“伸展”是什么意思。你能把图表1和图表2放在一起，看看你希望它们是什么样子吗？当然可以@wergeld。我想出了如何让图表看起来像我想要的那样，但是我不得不改变数据格式，我宁愿不这样做。第一个提琴显示基于时间的数据。第二个提琴显示基于距离的数据。这是可行的，但我将从服务器上分别获取不同的序列（时间、距离和其他Yax），因此我希望不会像在小提琴中那样为拼接它们而支付性能损失……您有什么建议吗？好吧，但您需要以某种方式向图表提供数据。如果您不想在服务器端执行此操作，请使用Javascript和用户资源-在图表上使用它们之前只需计算值，总体思路：谢谢Pawel。这将工作，除了我有5个y轴和系列的二维数组格式不适应。如何拥有5个独立的y轴并在两个x轴之一之间切换？

$('#btn').click(function () {
    if (set == true) {
    chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartDistance));
        set = false;
    } else {
        chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartSpeed));
        set = true;
    }
});