Question

我有一个带有多个y轴和两个x轴的折线图，即时间和距离。我想显示图表，允许用户在两个x轴之间切换。我正在努力如何定义图表，以便它将xAxis显示为距离并尝试在xAxis上将序数设置为false，使用类别，指定多个xAx并且似乎无法破解代码。工作解决方案应该生成两个图形，如链接图片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切换，但它是在当天晚些时候。以下是fiddle的示例。

Highcharts显示备用x轴

1 个答案: