javascript JSON 和 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19968453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSON and Highcharts
提问by Anfuca
I'm recently new using JSON and i′m not able to draw any kind of charts from Highcharts. Since last Friday i'm reading and reading over the internet, i'm learning a lot, for sure, but right now i'm desperate. I just want a simple bar and a pie!
我最近刚开始使用 JSON，无法从 Highcharts 绘制任何类型的图表。从上周五开始，我在互联网上阅读和阅读，当然，我学到了很多东西，但现在我很绝望。我只想要一个简单的酒吧和一个馅饼！
From my php file, Json_encode prints something this:
从我的 php 文件中， Json_encode 打印出以下内容：
[["January",4],["February",9]]
I think that is the correct format, string with the "" and int without it.
我认为这是正确的格式，带有“”的字符串和没有它的 int。
And this is the code that i'm trying (i'm putting the entire example from some web i found):
这是我正在尝试的代码（我将整个示例从我发现的某个网站上放了下来）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Requests'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
}, {
series: []
}
$.getJSON("myphpname.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thanks for all!!!
谢谢大家！！！
采纳答案by Anfuca
The code is ok. The problem was that I was using a freeserver.
代码没问题。问题是我使用的是免费服务器。
With XAMPP, at the localhostit works perfect!
使用XAMPP，localhost它完美运行！
Thanks for all!
谢谢大家！
回答by SteveP
One way to sort this is to set the categories and data separaately:
排序的一种方法是分别设置类别和数据：
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ["A", "B"]
},
series: [{
data: [
4,9
]
}]
};
chart = new Highcharts.Chart(options);
});
Your getJson could return an object like:
你的 getJson 可以返回一个对象，如：
{
categories:["January","February"],
data:[4,9]
}
and then your javascript could set the chart options like:
然后您的 javascript 可以设置图表选项，如：
options.xAxis.categories = json.categories;
options.series[0] = json.data;
