Question

你好再次SO用户：）

我制作了一个json字符串，它应该与图表一起使用（实际上它可以工作，但只有当我进行硬编码复制粘贴而不是运行时工作时），但遗憾的是系列不会渲染。

我正在尝试一些事情：

检查变量范围
粘贴JSON数据，因为它将被硬编码（然后它会起作用，但它不是解决方案）
检查JSON字符串是否有效（JSON.parse（）给出 true ）

做一些睡眠式功能（它没有帮助）

这是我的JS代码（我会使用jsfiddle，但是有一个来自DB的$ .get所以我不能这样做：（

<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>

修改转换代码以在$ .get回调中使用highcharts没有帮助。

又一个不起作用的版本（仅供参考）

<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查看完整代码

Answer 1

您必须将设置数据的代码移动到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()。

Answer 2

好的我已经解决了这些问题，首先我想提供一些有关JS中JSON的重要信息

什么是JSON？根据官方网站：

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

这部分有点棘手，尤其是

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

JSON是一种用于在文本编辑器或网站上阅读的文本格式，但它不是JavaScript中的文本，它是基于文本的对象，我们获取或生成以各种方式使用数据。我不喜欢这种描述的原因是因为有些语言可以让我使用字符串作为JSON，或者，如果不可能 - 会出现错误。 JavaScript并不关心这一点，我不得不一整天都在寻找解决方案，这不是我的错，可能也不是高潮，但有些人忘记了这种错误（我不确定它是否应该是JS引擎或库desinger）。如果你愿意，你总是可以责备我。

你可以在那里看一下： 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/

所以，更多的错误和＆amp;基于highCharts数据系列的好例子这里没有示例显示控制台中的任何错误

错误 - 字符串格式不起作用

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

好 - 我们手动将JSON字符串解析为对象

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

好 - 与上述相同，但它是明显的队长

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

好 - 我们将数据硬编码（如果这对项目来说不是问题）。在某种程度上，这就像直接传递对象

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

错误 - 使用eval是一个巨大的安全隐患，所以这是一个永远不会去的方式

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

我认为这就是全部：）

Json语法有效，但HighChart不能正确显示系列

2 个答案: