Я не могу сохранить данные моей диаграммы highchart в localStorage - PullRequest
Новая
       5

Я не могу сохранить данные моей диаграммы highchart в localStorage

3 голосов
/ 09 июля 2020

Не могу сохранить данные в localstorage, я получаю результат [объект-объект], [объект-объект], [объект-объект]

Вот код 

var usersonline = null;
var maxonline = 50;
Highcharts.stockChart('container', {
 chart: {
     events: {
         load: function () {

             // set up the updating of the chart each second
             var series = this.series[0];
             setInterval(function () {
                 var x = (new Date()).getTime(), // current time
                     y = Math.round(usersonline);
                 series.addPoint([x, y], true, false);
             }, 1000);
         }
     }
 },

 time: {
     useUTC: false
 },

 rangeSelector: {
     buttons: [{
         count: 1,
         type: 'hour',
         text: '1H'
     }, {
         count: 3,
         type: 'hour',
         text: '3H'
     }, {
         type: 'all',
         text: 'All'
     }],
     inputEnabled: false,
     selected: 2
 },

 title: {
     text: 'Live Chart of Players Online'
 },

 exporting: {
     enabled: false
 },
 yAxis: {
      title: 'Players Online',
      min: 0,
      plotLines: [{
         color: 'red', // Color value
         label: {
                 text: "Max Player Line"
         },
         value: maxonline, // Value of where the line will appear
         width: 2 // Width of the line    
         }]
 },
 series: [{
     name: 'Players Online',
     connectNulls: false,
     data: (function () {
         var data = [],
             time = (new Date()).getTime(),
             i;
         if (typeof(Storage) !== "undefined") {
             if (localStorage.getItem("chartdata") === null) {
                 localStorage.setItem('chartdata',[])
                 data = []
                 console.log("No Data Found, Creating Some!")
             } else {
                 data = JSON.parse(localStorage.getItem('chartdata'))
                 console.log("Chart Data Loaded.")
             }
         } else {
             console.log("localStorage is not Supported. Saving Chart Data will not work.")
         }
         // generate an array of random data
         window.onbeforeunload = function(){
             console.log("Chart data Saved")
             localStorage.chartdata = JSON.stringify(data)
         }
         return data;
     }())
 }],
 lang: {
     noData: "No Data."
 },
 noData: {
     style: {
         fontWeight: 'bold',
         fontSize: '40px',
         color: '#303030'
     }
 }
});

Если я обновлюсь sh страница показывает диаграмму как пустую и не отображает «Нет данных», поэтому данные есть, но они повреждены. Я хочу, чтобы когда я обновил sh страницу, на ней будут храниться данные даже после перезапуска браузера или компьютера.

Есть ли какое-либо решение этой проблемы, я пробовал несколько способов, но ни один из они работают.

Это таблица с данными в реальном времени, которую мне нужно сохранить, поэтому диаграмма не будет go пустой, если вы случайно обновите sh страницу.

Ответы [ 2 ]

0 голосов
/ 10 июля 2020

Итак, когда вы получаете элемент, он говорит [Object object], потому что localStorage.setItem принимает DOMString, а не объект. setItem будет использовать toString для преобразования значений в строку, а Object.prototype.toString всегда будет [object Object].

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

Вам необходимо используйте JSON.stringify, чтобы преобразовать ваш массив в допустимую строку JSON в вызове функции localStorage.setItem, а затем используйте JSON.parse для анализа этой строки, когда вы используете localStorage.getItem. 

const loki = { "type": "dog", "name": "Loki" }

// Sets [object Object] in local storage
localStorage.setItem("lokiKey", loki)

// Sets "{"type":"dog","name":"Loki"}" in local storage
localStorage.setItem("lokiKey", JSON.stringify(loki))

Надеюсь на это помогает!

0 голосов
/ 09 июля 2020

Вы пробовали использовать myChart.addSeries? Если серия была изменена, следует вызвать метод redraw

...