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

Question

我通过集成 highcharts-ng

的 DI 使用 angularjs highchart

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

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
            }]
        }

我添加了范围滑块选项，但它没有反映在图表中。

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

Answer 1

在 highstock 文档中包含对 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 的引用，并且还必须添加到 options。

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

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

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

How to integrate highchart range slider in angularjs

javascript

highcharts

highstock

angularjs

highcharts-ng