如何在angularjs中集成高图范围滑块(How to integrate highchart range slider in angularjs)

如何在angularjs中集成高图范围滑块(How to integrate highchart range slider in angularjs)

我通过整合highcharts-ng的DI来使用highcharts-ng

我通过以下选项创建了不同类型的图表

var chart = { options: { chart: { type: 'bar' } }, title: { text: chartData.name }, subtitle: { text: chartData.subname }, rangeSelector: { enabled:true, selected: 1 }, xAxis: { title: { text: chartData.x.title } }, yAxis: { title: { text: chartData.y.title } }, series: [{ name: chartData.data[0].name, data: chartData.data[0].data, dashStyle: 'longdash' }, { name: chartData.data[1].name, data: chartData.data[1].data, dashStyle: 'dot' }, { name: chartData.data[2].name, data: chartData.data[2].data }] }

我添加了rangelider选项，但它没有反映在图表中。

如何在angualrjs中集成高图范围滑块

I am using angularjs highchart by integrating the DI of highcharts-ng

I have created different type of charts by following options

var chart = { options: { chart: { type: 'bar' } }, title: { text: chartData.name }, subtitle: { text: chartData.subname }, rangeSelector: { enabled:true, selected: 1 }, xAxis: { title: { text: chartData.x.title } }, yAxis: { title: { text: chartData.y.title } }, series: [{ name: chartData.data[0].name, data: chartData.data[0].data, dashStyle: 'longdash' }, { name: chartData.data[1].name, data: chartData.data[1].data, dashStyle: 'dot' }, { name: chartData.data[2].name, data: chartData.data[2].data }] }

I have added rangeslider options but its not reflecting in chart.

How to integrate highchart range slider in angualrjs

最满意答案

包括对highstock而不是highcharts的引用。 两者都与highcharts-ng兼容，但只有highstock支持rangeSelector。 然后，将rangeSelector移动到options对象中。 注 - “范围滑块”功能在highstock文档中称为navigator ，并且还必须添加到options 。

var chart = { options: { chart: { type: 'bar' }, rangeSelector: { enabled: true }, navigator: { enabled: true } } ... };

这是一个演示，来自highcharts-ng的GitHub页面： http ： //jsfiddle.net/pablojim/r88yszk0/

Include a reference to highstock instead of highcharts. Both are compatible with highcharts-ng, but only highstock supports rangeSelector. Then, move rangeSelector into the options object. Note - "range slider" functionality is called navigator in the highstock docs, and must also be added to options.

var chart = { options: { chart: { type: 'bar' }, rangeSelector: { enabled: true }, navigator: { enabled: true } } ... };

Here is a demo, from highcharts-ng's GitHub page: http://jsfiddle.net/pablojim/r88yszk0/