Highcharts不显示字符串值

Question

我正在尝试将 localstorage 值添加到 highchart 系列中，但它不起作用。

当我在控制台上打印“newString”值并在代码中替换“newString”的值时它可以工作，但当我使用var newString 时它不会。

代码如下：

$(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 显示的内容：

{名称：2，数据：[12345,23456,34567]}，{名称：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
   });
});

最后初始化Highcharts:

var chart = new Highcharts.Chart(options);

---

See at Plunker