当存在 xAxis 配置字段时，Highstock.js/Angular.js 中的范围选择器不会更新图表

Question

我在 Angular 中实现了一个 Highstock.js 图表。我正在尝试为用户提供多个缩放选项，默认情况下选择其中一个。我定义了按钮，我指示默认情况下应选择哪个按钮（通过提供按钮的索引），但它仅在配置 JS 对象中不存在 "xAxis" 字段时才有效。

$scope.chartConfig = {  
    "useHighStocks":true,
    /*
        the line below prevents the rangeSelector from selecting
        a custom time frame option in spite of correct configuration
    */
    "xAxis": {},
    "options":{  
        "rangeSelector": {
            "allButtonsEnabled": true,
            "enabled": true,
            "selected": 1,
            "buttons": [{
                "type": 'month',
                "count": 1,
                "text": '1m'
            }, {
                "type": 'month',
                "count": 3,
                "text": '3m'
            }]
        }
        ...

如何在图表中同时选择 xAxis 和自定义缩放？

这是 Fiddle，请尝试注释/取消注释 xAxis 行和运行代码。

Fiddle: http://jsfiddle.net/11zqLnh3/

Answer 1

您是否尝试过将 xAxis 对象放入选项中？看起来在这种情况下它会工作得很好：

    "options":{  
        "xAxis": {}, // try commenting this line

        "rangeSelector": {
    "allButtonsEnabled": true,
    "enabled": true,
    "selected": 1,
    "buttons": [{
        "type": 'month',
      "count": 1,
      "text": '1m'
            }, {
      "type": 'month',
      "count": 3,
       "text": '3m'
    }]
        },
  },

看这个例子： http://jsfiddle.net/11zqLnh3/1/

当存在 xAxis 配置字段时，Highstock.js/Angular.js 中的范围选择器不会更新图表

Range selector in Highstock.js / Angular.js doesn't update chart when xAxis configuration field is present

javascript

highcharts

highstock

angularjs