Highcharts userOptions не обновляется после изменения названия диаграммы

Question

Я пытаюсь сохранить userOptions диаграммы (строку JSON) в базе данных для дальнейшего использования.Но после того, как я изменил что-то вроде заголовка диаграммы, userOptions не обновляется для повторного сохранения в базе данных.Графический интерфейс Chart обновляется нормально, но не chartOptions.

Большое спасибо за любую помощь, которую вы можете предложить!

1) Загрузите userOptions из БД и постройте диаграмму:

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

Затем динамически измените заголовок диаграммы:

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

Обновления графического интерфейса пользователя userOptions остаются неизменными:

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/