javascript - 如何在angularjs中集成 Highcharts 范围 slider

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

我添加了范围 slider 选项，但它没有反射(reflect)在图表中。

如何在angualrjs中集成highchart range slider

Answer 1

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

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

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