하이 차트에 문자열 값이 표시되지 않습니다.

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 데이터 : 23,456, 34,567, 45,678]}, {상품명 : 4 데이터 : 34,567, 45,678, 56,789]}, {상품명 : 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