ハイチャートに文字列値が表示されない

Question

highchartシリーズにlocalstorage値を追加しようとしていますが、動作しません。

"newString"という値をコンソールに表示し、コードで "newString"の値を置き換えたときに動作しますが、var newStringを使用した場合は表示されません。

{名：2、データ：[12345、23456、34567]}、{名前：

$(document).ready(function() { 
    var archive, 
     j = "", 
     keys = Object.keys(localStorage), 
     x = keys.length; 
    var i = 0; 
    while (i < x) { 
     archive = JSON.parse(localStorage.getItem(keys[i])); 
     j += "{ name: " + keys[i] + ", data: [" + archive.username + ", " + archive.email + ", " + archive.password + "]},"; 
     i++; 
    } 
    var newString = j.substr(0, j.length - 1); 
    console.log('newString: ', newString); 

    Highcharts.chart('container', { 

     title: { 
      text: 'Datos ingresados' 
     }, 

     subtitle: { 
      text: 'Localstorage' 
     }, 

     yAxis: { 
      title: { 
       text: 'Datos ingresados' 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle' 
     }, 

     plotOptions: { 
      series: { 
       label: { 
        connectorAllowed: false 
       }, 
       pointStart: 2017 
      } 
     }, 

     series: [ 
      newString 
     ], 

     responsive: { 
      rules: [{ 
       condition: { 
        maxWidth: 500 
       }, 
       chartOptions: { 
        legend: { 
         layout: 'horizontal', 
         align: 'center', 
         verticalAlign: 'bottom' 
        } 
       } 
      }] 
     } 

    }); 

}); 

これはショーをCONSOLE.LOGものである：ここ

コードである3データ：[23456、34567、45678]}、{名前：4、データ：[34567、45678、56789]}、{名前：5、データ：[45678、56789、67890]}

私はそれのためのnewStringの値を変更し、それは正常に動作します。

Answer 1

Highchartsは、純粋な文字列としてデータを表示するためです。だから、あなたの文字列を解析する必要があります。

しかし、最初にすべての、私たちは正確に解析するために有効なJSONを作成する必要があります。

var newString = "{ name: 2, data: [12345, 23456, 34567]}"; //bad json 
var json = newString.replace(/(['"])?([a-zA-Z0-9]+)(['"])?:/g, '"$2":'); 
var goodJson = "[" + json + "]"; //valid json 

今、私たちはHighchartsのためのオプションを作成することができます。

var options = { 
    chart: { 
    renderTo: 'container', 
    type: 'spline' 
    }, 
    series: [] 
}; 

を、次のようにseriesにデータをプッシュ：

$.each(JSON.parse(goodJson), function(i, item) { 
    options.series.push({ 
    name: item.name, 
    data: item.data 
    }); 
}); 

最後にを初期化します。：

var chart = new Highcharts.Chart(options); 

---

See at Plunker