Данные серии Highcharts не сохраняются при изменении углового маршрута

Question

Я использую Highcharts с AngularJS. У меня есть директива, которая генерирует диаграмму. В функции связи я указываю объект по умолчанию chartOptions. После установки параметров по умолчанию я добавляю этот объект к другому объекту, переданному директиве, которая сохраняется между маршрутами и обновлениями, passedObject. Таким образом, любые изменения до chartOptions после добавления успешно сохраняются. Затем диаграмма генерируется при вызове Highcharts.chart();

return { 
    restrict: 'E', 
    scope: { 
     passedObject: "=" 
    }, 
    link: function (scope, element) { 

     var chartOptions = { 
      title : { 
      text: 'sample report' 
      } 
      ... 
     } 

     scope.passedObject.chartOptions = scope.passedObject.chartOptions || chartOptions; 

     var chart = Highcharts.chart(element[0], scope.passedObject.chartOptions); 
    } 

    // successfully add new series 
    // series rendered immediately but does not persist though view changes and page reload. 
    scope.addSeries = function(seriesObject){ 
     scope.elementObject.chart.addSeries(seriesObject); 
    }; 

    // successfully pushes object to array 
    // does not immediately render because Highchart doesn't see change 
    // but does render after reloading because Highchart checks options again 
    // Does not render with animation like addSeries() API does. 
    scope.addSeriesNoAPI = function(seriesObject){ 
     scope.elementObject.chart.series.push(seriesObject); 
    }; 
} 

Там не проблема создания штурманской в ​​первый раз, и если я вернусь к этой точке зрения, диаграмма снова создает с теми же параметрами по умолчанию.

Однако, если я использую API Highcharts для программного добавления новой серии данных chart.addSeries(newSeriesObject), серия добавляется и отображается на диаграмме, но не сохраняется между маршрутами и обновлениями.

Если я вручную добавить объект серии к моей chartOptions через прямой JS scope.passedObject.chartOptions.series.push(newSeriesObject) объект успешно толкнул в массив и будет сохраняться, но карта не будет автоматически обновляться, потому что он не знает series массива изменился, что почему API существует.

При ближайшем рассмотрении выясняется, что функция Highchart нажимает новый объект на некоторый массив, отличный от того, который я сохраняю, но я не могу понять, как заставить это работать.

Я предположил, что эта строка кода: var chart = Highcharts.chart(element[0], scope.passedObject.chartOptions); бы связать таблицу с scope.passedObject.chartOptions объекта, таким образом, что когда что-то вроде функции добавил новую серию, он будет добавлен в scope.passedObject.chartOptions. После регистрации и просмотра объектов, однако, это не так.

Answer 1

Один из способов - сохранить эти данные в корневой области (но это не самый лучший способ).

Другим является использование углового обслуживания для хранения этих данных. И включите эту службу там, где она вам нужна.

Угловое обслуживание, в отличие от контроллеров, не будет сбрасываться при смене видов/страниц.

Я предлагаю вам создать угловую службу, в которой хранятся параметры диаграммы, в которых есть объект параметров диаграммы, а также геттер и сеттер. Вы также можете использовать функции, которые вносят изменения в объект диаграммы в этой службе.

В вашем случае вы, кажется, делаете манипуляции с объектом диаграммы внутри контроллера (после того, как вы получаете его из службы, возможно?), Если вам нужно будет вернуть новый объект к службе.

Кроме того, когда я говорю, я имею в виду обслуживание что-то вроде этого:

app.service('highChartService', function() { 
    var chartOptions; 
    var highChartServiceObj = {}; 

    highChartServiceObj.getChartOptions = function() { 
     return chartOptions; 
    }; 

    highChartServiceObj.setChartOptions = function (options) { 
    chartOptions = options; 
    }; 

    highChartServiceObj.computeChartObject = function() { 
    //do some computation 
    } 

    return highChartServiceObj; 

}); 

Добавьте выше сервис для вашей директивы и использовать, чтобы обновить объект highchart, когда какие-либо изменения.

Также, если я не ошибаюсь, что вы хотели бы сделать, добавьте новостной сайт chart.addSeries(newSeriesObject), который разрешит вашу дилемму. Почему бы не обновить объект диаграммы в качестве следующего шага: scope.passedObject.chartOptions.series.push(newSeriesObject)?Хотя я предпочел бы, что быть частью службы тоже, если я делал это, все highchart манипуляций просто быть частью службы, где я хотел бы иметь функцию, как это в перечисленные выше услуги:

highChartServiceObj.updateChart(newSeriesObject, chart) { 
    chartOptions.series.push(newSeriesObject); 
    chart.addSeries(newSeriesObject); 
}