0

我正在尝试一个名为 Highcharts 的图表包（你们中的一些人可能熟悉它，但不管问题与 Highcharts 本身无关）。我想做的是让我的 PHP 生成的 HTML 将 JSON 对象嵌入到 DOM 中，然后由静态 jQuery 监听函数获取。这是它的样子：

 // Static JS file that get's loaded with every page load and 
 // and listens for a class with ".highchart_config".
 // When it finds a config class it then looks in the attribute "data-chart"
 // for the JSON configuration object
 jQuery.noConflict();
 jQuery(function($) {
   $(document).ready(function() {
    $(".highchart_config").each(function(index) {
        var config_obj = $(this).attr('data-chart');
        chart = new Highcharts.Chart( config_obj );
    });
   });
 });

然后HTML如下：

 <div class="highchart_config" data-chart='         {chart: {"renderTo":"chart2","defaultSeriesType":"column"},title: {"text":"Monkies are Happy Animals"},xAxis:{"categories":["Apples","Oranges","Pears","Grapes","Bananas"],"min":null,"title":""},yAxis: {"min":0,"title":{"text":"Total fruit consumption"}},legend: {"align":"center","x":0,"verticalAlign":"bottom","y":0,"floating":false,"backgroundColor":null,"borderColor":"#CCC","borderWidth":1,"shadow":false,"reversed":true},tooltip: { formatter: function() { return this.series.name + ":" + this.y + " "}},plotOptions: {"column":{"stacking":"normal","dataLabels":{"enabled":false}}},series: [{"name":"Running","data":[5,3,4,7,2]},{"name":"Cycling","data":[2,2,3,2,1]},{"name":"Lifting","data":[3,4,4,2,5]}]}'></div>

使用调试器，我可以通过在 Highcharts 对象实例化发生的行上放置一个断点来看到这个工作。当断点被命中时，我打印出“chart_obj”的值：

 {chart: {"renderTo":"chart2","defaultSeriesType":"column"},title: {"text":"Monkies are Happy Animals"},xAxis:{"categories":["Apples","Oranges","Pears","Grapes","Bananas"],"min":null,"title":""},yAxis: {"min":0,"title":{"text":"Total fruit consumption"}},legend: {"align":"center","x":0,"verticalAlign":"bottom","y":0,"floating":false,"backgroundColor":null,"borderColor":"#CCC","borderWidth":1,"shadow":false,"reversed":true},tooltip: { formatter: function() { return this.series.name + ":" + this.y + " "}},plotOptions: {"column":{"stacking":"normal","dataLabels":{"enabled":false}}},series: [{"name":"Running","data":[5,3,4,7,2]},{"name":"Cycling","data":[2,2,3,2,1]},{"name":"Lifting","data":[3,4,4,2,5]}]}

这对我来说看起来“正确”，但它不起作用。相反，对象的实例化失败，因为 config_obj 格式不正确。为了确保我没有犯一些愚蠢的语法错误，我将值剪切并粘贴到 config_obj 中，并将其放入一个如下所示的静态 JS 文件中：

 $(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {"renderTo":"chart2","defaultSeriesType":"column"},title: {"text":"Monkies are Happy Animals"},xAxis: {"categories":["Apples","Oranges","Pears","Grapes","Bananas"],"min":null,"title":""},yAxis: {"min":0,"title":{"text":"Total fruit consumption"}},legend: {"align":"center","x":0,"verticalAlign":"bottom","y":0,"floating":false,"backgroundColor":null,"borderColor":"#CCC","borderWidth":1,"shadow":false,"reversed":true},tooltip: { formatter: function() { return this.series.name + ":" + this.y + " "}},plotOptions: {"column":{"stacking":"normal","dataLabels":{"enabled":false}}},series: [{"name":"Running","data":[5,3,4,7,2]},{"name":"Cycling","data":[2,2,3,2,1]},{"name":"Lifting","data":[3,4,4,2,5]}]
        });
    });
});

这种“硬编码”方法有效，但实例化调用应该具有完全相同的配置对象传入。我现在不知道如何继续。我一直在阅读有关此主题的 stackoverflow 上的其他帖子，但找不到任何东西可以帮助我解决我的具体问题。非常感谢任何和所有帮助。

更新：我没有尝试过......使用 data() 和 attr() 方法都无济于事，无论是否调用 JSON.parse(config_obj)。看来问题与 config_obj 被视为字符串有关，因此在调试器中，我决定将变量“test”分配给 config_obj 的剪切和粘贴的字符串结果，不带外部引号。它工作得很好，所以它显然是一个结构良好的 JSON 字符串，但将它转换为字符串仍然让我望而却步。下面是我的调试会话的图像，其中显示了三件事：

  1. 首先，在我的 config_obj 字符串上使用 JSON.parse() 函数时出现错误（无论我使用 data() 还是 attr() 从 DOM 检索 config_obj 都是如此）
  2. 如果我只是将文本剪切并粘贴到名为“test”的测试变量中，它将被识别为有效的 JS 对象
  3. 如果我在测试对象上使用 JSON.stringify() 方法，它会转换回与我的 config_obj 变量相同的字符串版本......不同之处在于对象中的第一级属性在它们周围有引号. 这可能暗示出了什么问题，但我仍然没有破解这个坚果......任何帮助将不胜感激。

分配给变量然后字符串化

4

2 回答 2

2

当您获得属性值时 - 使用.attr()- 您被返回的是一个字符串。您需要解析该字符串以将其转换为实际对象，因此将以下行更改为：

chart = new Highcharts.Chart( JSON.parse(config_obj) );

重要的是JSON.parse()功能。

另外，请注意，如果您使用的是data-*属性，最好使用该.data()函数，因此您可以将另一行更改为：

var config_obj = $(this).data('chart');
于 2012-08-04T08:20:19.243 回答
0

正如您可能在我对问题的“更新”中看到的那样，我发现 JSON 对象的字符串版本在我的原始对象和我通过将相同的字符串剪切并粘贴到一个对象中然后运行创建的对象之间存在差异JSON.stringify() 就可以了。

这种变体——包括对象名称周围的双引号标记——似乎对其正常工作很重要。如果您使用 jQuery 的 .data() 方法以这种方式传递它，它会自动将其转换为 JSON 对象，并且无需直接调用 JSON.parse()。

我仍然觉得奇怪的是，使用 JSON 的 parse() 方法将字符串转换为对象的标准比 JS 本身更严格，如果有人对此有任何理论，我会很感兴趣。无论哪种情况，都想感谢@Anthony、@DCoder 和其他所有提供帮助的人。

这是有效的 DOM 条目：

<div class="highchart_config" data-chart='{"chart":{"renderTo":"chart2","defaultSeriesType":"column"},"title":{"text":"Monkies are Happy Animals"},"xAxis":{"categories":["Apples","Oranges","Pears","Grapes","Bananas"],"min":null,"title":""},"yAxis":{"min":0,"title":{"text":"Total fruit consumption"}},"legend":{"align":"center","x":0,"verticalAlign":"bottom","y":0,"floating":false,"backgroundColor":null,"borderColor":"#CCC","borderWidth":1,"shadow":false,"reversed":true},"tooltip":{},"plotOptions":{"column":{"stacking":"normal","dataLabels":{"enabled":false}}},"series":[{"name":"Running","data":[5,3,4,7,2]},{"name":"Cycling","data":[2,2,3,2,1]},{"name":"Lifting","data":[3,4,4,2,5]}]}'></div>

将这个 DOM 条目作为输入的 JS 是：

jQuery.noConflict();
jQuery(function($) {
  $(document).ready(function() {
    $(".highchart_config").each(function(index) {
        var config_obj = $(this).data('chart');
        chart = new Highcharts.Chart( config_obj );
    });
  });
});
于 2012-08-05T18:18:44.293 回答