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

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

本文关键字:js 存在 字段 更新 配置 xAxis Angular 范围 选择器 Highstock      更新时间:2023-09-26

我在Angular中实现了一个Hilitock.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和自定义缩放选择?

这是小提琴,请尝试注释/取消注释xAxis行并运行代码。

小提琴:http://jsfiddle.net/11zqLnh3/

您是否尝试过将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/