2013-01-30 2 views
4

Я хотел бы создать таблицу HighStock, содержащую компонент навигатора, отображающий несколько рядов, которые будут отображаться на одной и той же серии в главном графике. Похоже, что эта функция не поддерживается в HighStock, так как допускается только одна серия. Кто-нибудь столкнулся с этой проблемой и сумел найти жизнеспособное решение/альтернативу?Отображение нескольких серий в навигаторе диаграммы HighStock

+0

И, если я не ошибаюсь, как правило, отображается первой серии данных. Даже если вы отключите все серии из блока легенды. – Zon

ответ

7

Несколько серий в навигаторе не поддерживаются официально, поэтому только этот «взломать», который вы используете, отображает множество серий в навигаторе. Пример: http://jsfiddle.net/6fFwM/ Эта функция запрашивается в нашей системе здесь (http://highcharts.uservoice.com/forums/55896-general/suggestions/2361925-allow-navigator-to-have-multiple-data-series), поэтому вы можете проголосовать за нее.

window.chart.addSeries({ 
     name : "", 
     xAxis: 0, 
     yAxis: 1, 
     type: "line", 
     enableMouseTracking: false, 
     data : new_data, 
     showInLegend:false 
}); 
+0

небольшое исправление, чтобы сделать диаграмму подходящей в навигаторе http://jsfiddle.net/6fFwM/70/ – redexp

+0

Небольшое изменение в данных, так что теперь пользователи теперь имеют несколько строк в навигаторе http://jsfiddle.net/6fFwM/73/ –

1

От Highstock 5 это официально поддерживается. Вы можете глобально или конкретно для каждой серии указать showInNavigator: true (API). Связанная с этим опция - navigatorOptions (API), которая повлияет на серию, у которой showInNavigator установлен на true.

Например: (JSFiddle):

plotOptions: { 
    series: { 
     showInNavigator: true // Global value 
    } 
}, 

series: [{ // This series has no value set and will use global 
    name: 'MSFT', 
    data: MSFT 
}, 
{ 
    name: 'GOOGL', 
    showInNavigator: false, // Individual series value 
    data: GOOGL 
}, 
{ 
    name: 'ADBE', 
    showInNavigator: true, // Individual series value 
    navigatorOptions: { // Specific values that affect the series in the navigator only 
     type: 'line', 
     color: 'red' 
    }, 
    data: ADBE 
}]