高图显示备用x轴

Question

我有一个包含多个y轴和两个x轴（即时间和距离）的折线图。 我想显示允许用户在两​​个x轴之间切换的图表。 我正在努力定义图表，以便将xAxis显示为距离，并尝试使用类别指定多个xAxes在xAxis上将ordinal设置为false，并且似乎无法破解代码。 可行的解决方案应产生两个图形，如链接的图片中所示https://drive.google.com/file/d/0B5768Z0sc7d7TFBPVDExU1NXWHc/edit?usp=sharing （因为这是我的第一篇文章，我没有发表的声誉图片在这里...）

这里有一些简化的代码片段以及相关的jsFiddle供您细读。

$('#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]
}] });

这将产生一个等距的xAxis，每个类别元素都占据一个位置，即不引入数据系列的“拉伸”。 http://jsfiddle.net/robertvizza/LLExL/2141/

$('#container').highcharts({

xAxis: {
    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]
},{
    data: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
    xAxis: 0
}] });

这将在等距的xAxis值上显示两个系列。（jsFiddle是2142-再次是第一个帖子，因此只能发布2个链接...）

我希望Highcharts可以解决此问题，因为我不希望需要重新计算所有数据点以在两个不同的xAxes上伪造显示内容……在此先感谢您的帮助。

Answer 1

由于基本xAxis在图表之间变化，因此您可以尝试真正地完全更改图表。 我创建了两个chartOptions集和一个在两者之间切换的按钮。

$('#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切换，但是已经很晚了。 这是一个小提琴的例子。