Highcharts Ajax Json不显示图表
Highcharts Ajax Json not displaying Chart
我正在尝试使用ajax折线图,我已经创建了以下内容,但它不显示任何内容。
我想要实现的是显示过去30天的页面浏览量。因此,我的Json编码显示[日期,页面浏览量]
我希望日期水平显示在底部,页数在纵轴上。
当我加载页面时,没有错误,但显示空白。
Update:我已经更新了JSON数据,但我不明白它需要按什么样的顺序排序,因为数据现在是[A,B],我按A升序排序。
{"数据":[(143,1476374400000),(190,1476288000000),(108,1476201600000),(145,1476115200000),(125,1476028800000),(1475942400000,15)[1475856000000,18],[1475769600000,26],[1475683200000,31日],[1475596800000,42],[1475510400000,19],[1475424000000,34],[1475337600000,46],[1475251200000,34],[1475164800000,46],[1475078400000,34],[1474992000000,33],[1474905600000,39],[1474819200000,52],[1474732800000,47],[1474646400000,60],[40]1474560000000,,1474473600000,52岁,1474387200000,51,(70,1474300800000),1474214400000、69),(64,1474128000000),(1474041600000,45),[1473955200000,47],[1473868800000,44]],"名字":"www.example.com"}
然后通过遵循highcharts网站上的代码,我得到了这个
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css"/>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
// Get the CSV and create the chart
$.getJSON('https://www.micro.sg/json/', function (data) {
$('#container').highcharts({
data: {
json: data
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
</script>
</body>
您的代码中有两个问题。第一件事是你不必使用数据模块来加载json -实际上它对数据没有任何作用-所以你的图表是空的。您应该将数据放入series属性中-记住一件事,它需要数组,而不是对象,所以在这种情况下它应该是这样的(这些选项包括3个系列,其中2个没有数据):
series: [series, {
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
},
}, {
name: 'New visitors'
}]
另一个问题是数据需要排序。最好的方法是在服务器端进行排序,当然,您也可以在浏览器中进行排序。
series.data.sort(function (a, b) {
return a[0]-b[0];
});
示例:http://jsfiddle.net/ojg90mmg/1/
- jQuery匹配JSON对象的部分文本
- 在循环中分配json值时,值被覆盖
- 需要帮助设置json数组
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 使用JQuery解析JSON嵌套数组
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 如何使用json将对象列表从java转换为javascript
- 如何使用 node.js 比较两个 json 数组
- 如何将JSON数据导入我的ejs模板
- 区分JSON中的矩阵和列表列表
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 如何为json对象中的段发送array[]
- 根据id将json数组组合为一个json数组
- Json数据包含日期和时间格式
- AngularJS-在JSON选择器中使用变量名
- JSON.parse没有'不能使用Javascript