Highcharts Ajax Json不顯示圖表
[英]Highcharts Ajax Json not displaying Chart
問題描述
我正在嘗試使用ajax折線圖，並且創建了以下內容，但未顯示任何內容。
我想要實現的是顯示最近30天的頁面瀏覽量。 因此，我的Json編碼顯示[日期，頁面瀏覽量]
我希望日期水平顯示在底部，垂直軸上顯示頁數。
當我加載頁面時，沒有錯誤，但是顯示空白。
更新：我已經更新了JSON數據，但是我不知道需要對它進行排序，因為數據現在是[A，B]，並且我對它的升序進行了排序。
{“數據”：[[1476374400000,143]，[1476288000000,190]，[1476201600000,108]，[1476115200000,145]，[1476028800000,125]，[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]，[1474560000000,40]，[1474473600000,52]，[1474387200000,51]， [1474300800000,70]，[1474214400000,69]，[1474128000000,64]，[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>
1 個解決方案
解決方案1
1 已采納 2016-10-14 10:36:34
您的代碼中有兩個問題。 第一件事是您不必使用數據模塊來加載json-實際上它對數據不執行任何操作-因此您的圖表為空。 您應該將數據置於series屬性中-記住一件事，它需要數組，而不是對象，因此在這種情況下，它應該像這樣（此類選項包括3個series，其中有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];
});
Highcharts JSON，圖表未顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.