Highcharts 不显示图形元素或 xAxis

Question

您好，我正在尝试设置一个基本的图表，但遇到了一个我一直在努力解决的问题。

我正在使用 AJAX 捕获 JSON 对象，并尝试将其显示为图形，但仅显示标题标签、yAxis 标签和系列。我的图表中的列和奇怪的 xAxis（即使语法类似于 yAxis）都显示出来了。

我有任何人可能知道我可以如何解决这个问题，我们将不胜感激。

我的 HTML 页面包含以下 JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>e

我的 HTML 页面包含以下 HTML/JQuery：

<div id="chart1" style="width:800px; height:300px;"></div>

<script language="javascript" type="text/javascript">

 function chData (jsonData) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Test Chart'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: jsonData,
  });
}

$(document).ready(function() {
 $.ajax({
    url: 'ChartData',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (jsonData) {
        alert(JSON.stringify(jsonData));    // added to check valid JSON recieved
        chData(jsonData);
    }
  });

 });

</script>

另外，我的 JSON 对象（我已在验证器中签入，并由 url 返回：'ChartData'）显示为：

def chartItems
 @tmp2 = ["{"\name"\:"\rainydays"\},{"\data"\:[8, 14, 12, 16, 13, 23, 15]}"]

logger.info(@tmp2)
  render json: @tmp2 
end

我也浏览了 highcharts 网站上的文档，并尝试集成更多代码（例如在此找到的 'plotOptions'，例如 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/ ），但尽管尝试了很多方法来使其正常工作，但遗憾的是没有为我工作。

如果有人能提供帮助，将非常感激。

谢谢。

Answer 1

数组中的数据是字符串，而不是 javascript 对象。

[-->"<--{\"name\":\"rainydays\"},{\"data\":[8, 14, 12, 16, 13, 23, 15]}-->"<--]

我已经用 -->" 突出了有问题的引号。

你还有额外的括号：

[{"name\":\"rainydays\"-->}<--,-->{<--\"data\":[8, 14, 12, 16, 13, 23, 15]}]

最后，我不确定你的字符串为什么会被转义。您的最终数据需要如下所示：

[{"name":"rainydays","data":[8, 14, 12, 16, 13, 23, 15]}]

我不是红宝石人，但我想你想要这个：

@tmp2 = [{:name=>"rainydays",:data=>[8, 14, 12, 16, 13, 23, 15]}]