如何在 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

包含对高库存而不是高图表的引用。 两者都与highcharts-ng兼容，但只有highstock支持rangeSelector。 然后，rangeSelector移动到options对象中。 注意 - "范围滑块"功能在高库存文档中称为navigator，也必须添加到options。

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

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