Экран Highcharts alternate x axis

Question

У меня есть линейная диаграмма с несколькими осями y и двумя осями x, то есть временем и расстоянием. Я хотел бы отобразить диаграмму, позволяющую пользователю переключаться между двумя осями x. Я борюсь с тем, как определить диаграмму, чтобы она отображала xAxis как расстояние и попыталась установить порядковый номер в false на xAxis, используя категории, указав несколько xAxes и, похоже, не может взломать код. Рабочее решение должно создавать два графика, как в связанном изображении 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 toggle, но уже поздно. Вот пример fiddle.