2015-08-13 4 views
0

У меня есть многоосный Axis Highchart, но проблема, с которой я сталкиваюсь, заключается в том, что Scale не работает для первичной оси, в качестве стандартной используется только вторичная шкала Y Axis.Первичная шкала оси Y, не работающая в высоких диаграммах

Итак, линия появляется очень низко и не видно.

Я попытался использовать alignTicks: false, но это не помогло.

Проблема заключается в том, что на оси Y не отображается ни одна шкала.

Код: -

$(function() { 
var options = { 
chart: { 
    zoomType: 'xy', 
    renderTo: 'container', 
    alignTicks: false 
}, 
title: { 
    text: 'Job Status' 
}, 

xAxis: [{ 
    categories: [], 
    crosshair: true 
}], 
yAxis: [{ // Primary yAxis 
    labels: { 

     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    title: { 
     text: 'Transaction Count', 
     style: { 
      color: Highcharts.getOptions().colors[2] 
     } 
    }, 
    opposite: true 

}, { // Secondary yAxis 

    title: { 
     text: 'Time', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    labels: { 
     format: '{value} min', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    } 

}, { // Tertiary yAxis 
    gridLineWidth: 0, 
    title: { 
     text: 'Sea-Level Pressure', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    labels: { 

     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    opposite: true 
}], 
tooltip: { 
    shared: true 
}, 
legend: { 
    layout: 'vertical', 
    align: 'left', 
    x: 80, 
    verticalAlign: 'top', 
    y: 55, 
    floating: true, 
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
}, 
series: [{ 
    name: 'Rainfall', 
    type: 'column', 
    yAxis: 1, 
    data: [] 

}, { 
    name: 'Temperature', 
    type: 'spline', 
    data: [] 

}] 
}; 
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function (json) { 
    options.xAxis[0].categories = json[0]['data']; 
    options.series[0] = json[1]; 
    options.series[1] = json[2]; 
    options.series[0].type = 'column'; 
    options.series[1].type = 'spline'; 
    chart = new Highcharts.Chart(options); 
}); 
}); 

JSON: -

[ 
{ 
    "data": [ 
     "11-Aug 12:03", 
     "11-Aug 12:45", 
     "11-Aug 13:13", 
     "11-Aug 13:53", 
     "11-Aug 14:03", 
     "11-Aug 14:33", 
     "11-Aug 14:54", 
     "11-Aug 15:17", 
     "11-Aug 15:49", 
     "11-Aug 16:07", 
     "11-Aug 17:00", 
     "11-Aug 17:33" 
    ] 
}, 
{ 
    "data": [ 
     2300, 
     5412, 
     25, 
     2577, 
     2897, 
     2812, 
     2443, 
     2923, 
     2790, 
     2187, 
     2945, 
     23 
    ] 
}, 
{ 
    "data": [ 
     12.4, 
     4.56, 
     3.8, 
     1.2, 
     11, 
     12.3, 
     5.67, 
     7.65, 
     34.5, 
     12.78, 
     10.5, 
     2.8 
    ] 
} 
] 

С уважением, Абхай

+0

Можете ли вы опубликовать какой-то код, реплицирующий проблему, или еще какую-нибудь информацию, которая может помочь нам расследовать? – wergeld

+0

Обновлен код – user2854333

+0

Вот код, как скрипка: http://jsfiddle.net/nqk826qg/1/. Я жестко закодировал ваши категории xAxis и данные серии на основе вашего json. – wergeld

ответ

0

Я думаю, что проблема здесь у вас есть 3 YAxis и 2 набора данных. Вы назначаете series[0] на yAxis[1] и series[1] по умолчанию yAxis[0]. В любом случае, когда вы назначаете данные своей диаграмме, вы фактически назначаете весь объект series[n] объекту json[n], который переписывает вам назначения yAxis.

Что вам нужно сделать, это просто обновить series[n].data и не series[n] объект как:

options.series[0].data = json[1]['data']; 
options.series[1].data = json[2]['data']; 

Смотрите обновленную демо here.

+0

Perfect ... Thank You – user2854333

Смежные вопросы