Json的语法是有效的，但是HighChart不能正确显示序列 - Json is syntax-valid, but the HighChart won't display series correctly

用户们，你们好!)

我已经制作了一个json字符串，它应该与图表一起工作(实际上它工作，但只有当我做硬编码复制粘贴而不是运行时工作时)，但遗憾的是该系列不会渲染。

我在尝试一些事情:

检查变量范围
粘贴JSON数据，因为它将被硬编码(它工作，但它不是解决方案)
检查JSON字符串是否有效(JSON.parse()给出true)

做一些睡眠风格的功能(它没有帮助)

这是我的JS代码(我将使用jsfiddle，但有一个$。get from DB，所以我不能这样做:(

<script type="text/javascript">
$("#clickMe").click(function(event){
    $.get( '../action/jsonHChart.php', 
        {   productName: 'Snickers' }, 
            function (jsonData) { $("#jsonBug").val(jsonData); }
        );
        $("#hc_container").highcharts({
            chart: {
                 renderTo: 'hc_container'
              },
            series: [{
                name: 'Price',
                data: $("#jsonBug").val() // using variable won't help either
            }]
        });
});
</script>

编辑:

将代码转换为使用$中的highcharts。Get回调没有帮助。

又一个不工作的版本(仅供参考)

<script type="text/javascript">
$("#clickMe").click(function(event){
    $.get( '../action/jsonHChart.php', 
        {   productName: 'Snickers' }, 
            function (jsonData) { $("#hc_container").highcharts({
            chart: {
                 renderTo: 'hc_container'
              },
            series: [{
                name: 'Price',
                data: jsonData
            }]
        }); }
        );
});
</script>

这里是链接到演示的问题，代码是相当干净的(一些bootstrap meta和head标签留下)

http://nowshop.pl/libs/page/a.php

您可以使用firebug

查看完整的代码

您必须将将数据设置为图表的代码移动到ajax调用的回调中:

$("#clickMe").click(function (event) {
    $.get('../action/jsonHChart.php', {
            productName: 'Snickers'
        },
        function (jsonData) {
            $("#jsonBug").val(jsonData);
            $("#hc_container").highcharts({
                chart: {
                    renderTo: 'hc_container'
                },
                series: [{
                    name: 'Price',
                    data: $("#jsonBug").val()
                }]
            });
        }
    );
});

你在这里执行异步调用，所以$("#jsonBug").val()可能是未定义的，直到调用结束。

我解决了这个问题，首先我想给大家一些关于JS中JSON的重要信息

什么是JSON?根据官方网站:

JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。人类很容易读和写。它很容易被机器解析和生成。它是基于JavaScript编程语言的一个子集，标准ECMA-262第三版- 1999年12月。JSON是一种完全独立于语言的文本格式，但使用C系列语言程序员所熟悉的约定，包括C、c++、c#、Java、JavaScript、Perl、Python和许多其他语言。这些属性使JSON成为理想的数据交换语言。

这部分有点棘手，尤其是

JSON是一种完全独立于语言的文本格式

JSON是在文本编辑器或网站上阅读的文本格式，但它不是JavaScript中的文本，它是基于文本的对象，我们获取或生成以各种方式使用数据。我不喜欢这种描述的原因是，有一些语言允许我将字符串作为JSON使用，或者，如果不可能的话，就会出现错误。JavaScript不太关心这一点，我不得不一整天都在寻找解决方案，这不是我的错，可能也不是highCharts，但在某个地方有人忘记了捕捉这种错误(我不确定它应该是JS引擎或库设计器)。你想怪我就怪我吧。

你可以在这里找到更多信息:http://www.ecma-international.org/ecma-262/5.1/sec-15.12.2

// Thanks to: http://stackoverflow.com/a/3710226/2010246
function IsJsonString(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}
// And http://stackoverflow.com/a/22482737/2010246
function isObject(val) {
    if (val === null) { return false;}
    return ( (typeof val === 'function') || (typeof val === 'object') );
}
var Json = "[[0,1],[1,2],[2,3]]"; // in chart: [[x=0,y=1],[x=1,y=2],[x=2,y=3]]
var isCorrect = IsJsonString(Json);
console.log('a JSON string: ' + Json);
console.log('is this correct JSON: ' + isCorrect);
console.log('can I use it? ' + isObject(Json));
// Fix time
Json=JSON.parse(Json);
console.log('can I use it now? ' + isObject(Json));

http://jsfiddle.net/Lfgcha3h/

那么，再多几行错误的&基于highCharts数据系列的好例子这里的示例没有显示控制台

中的任何错误。

错误 -字符串格式不工作

data: "[[0,1],[1,2],[2,3]]"

Good -我们手动将JSON字符串解析为object

var json="[[0,1],[1,2],[2,3]]";
data: JSON.parse(json);

好 -和上面一样，但这是显而易见的船长行

data: JSON.parse("[[0,1],[1,2],[2,3]]");

Good -我们将数据硬编码(如果这对项目没有问题)。在某种程度上，这就像直接传递对象

data: [[0,1],[1,2],[2,3]]

错误 -使用eval是巨大的安全风险，所以永远不会走

// it's so bad that I won't even try to post an example

我想就这些了:)