Question

我正在尝试将图表userOptions（JSON字符串）存储在数据库中，以供以后使用。但是，在更改诸如图表标题之类的内容之后，userOptions不会更新以重新保存回数据库。图表GUI更新成功，但不会更新chartOptions。

非常感谢您提供的任何帮助！

1）从数据库加载userOptions并构建图表：

userOptions = {
    "chart":{type:"line"},
    "title":{"text":"Original Title"},
    ...
};
chart = Highcharts.chart('chart_container',userOptions);

然后动态更改图表标题：

chart.setTitle({text:'New Title'}):

由userOptions更新的图表GUI保持不变：

userOptions = chart.userOptions;
delete userOptions.series;
userOptions = JSON.stringify(CuserOptions);

userOptions = {
    "chart":{type:"line"},
    "title":{"text":"Original Title"},
    ...
};

我在想我错过了其他所有人都可以看到的东西。

Answer 1

图表的当前状态存储在chart.options属性中，chart.userOptions仅用于初始化图表。查看我在下面发布给您的演示。

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="btn">Change title</button>

JS：

var userOptions = {
  title: {
    text: 'Original Title'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }],
};

var chart = Highcharts.chart('container', userOptions);

$('#btn').on('click', function() {
    console.group('chart-options');
  console.log('old chart title: ', chart.options.title.text);

  chart.setTitle({
    text: 'New Title'
  });

  console.log('options: ', chart.options);
  console.log('new chart title: ', chart.options.title.text);
  console.groupEnd('chart-options');
});

演示： https://jsfiddle.net/u7hc40pj/1/

更改图表标题后，Highcharts userOptions不更新

1 个答案: