最近剛開始做圖形操作，糾結了一上午，highchat 動態綁定數據這塊一直不知道怎麼綁定，後來多次嘗試，發現 1.x軸的數據是個數組格式，我從後臺傳到前臺的時候，js中用數組進行處理數據，然後賦值到chat就不會報錯， 2.y軸的數據和x軸數據還不一樣，通過數組處理後發現還是無法顯示。後來我在後臺將 ...
最近剛開始做圖形操作，糾結了一上午，highchat 動態綁定數據這塊一直不知道怎麼綁定，後來多次嘗試，發現
1.x軸的數據是個數組格式，我從後臺傳到前臺的時候，js中用數組進行處理數據，然後賦值到chat就不會報錯，
2.y軸的數據和x軸數據還不一樣，通過數組處理後發現還是無法顯示。後來我在後臺將數據添加了中括弧[]括起來後，傳到前臺，然後前臺在用eval()處理後就能夠顯示了
3.eval具有計算的功能，剛開始x軸的時候我用了eval對時間進行操作發現時間都是相減了，格式為：2017-07-27，格式居然為1998這樣的。
下麵是我的後臺和前臺的程式邏輯：
1.後臺MVC控制器
1 public ActionResult Index()
2 {
3 return View();
4 }
5 public ActionResult GetAllReport()
6 {
7 var result = new { key = "2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02", value1 = "[9,23,24,54,67,1,23,45,23,444,55,89]", value2 = "[99,89,78,67,76,75,49,47,21,32,33,55]" };
8 return Json(result);
9 }
2.前臺：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/charts/highcharts/exporting.js"></script>
<script src="~/charts/highcharts/highcharts.js"></script>
<script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/Home/GetAllReport',
dataType: "json",
type: "POST",
data: null,
success: function (data) {
alert(data.key);
Chart(data.key, data.value1, data.value2);
}, error: function (jqXHR, textStatus, errorThrown) {
alert("出錯");
}
});
});
function Chart(key, value1, value2) {
var mycars = new Array();
var myvalue1 = new Array();
var myvalue2 = new Array();
var _tkey = key.split(',');
for (var i = 0; i < _tkey.length; i++) {
mycars[i] = _tkey[i];
}
var _tvalue1 = value1.split(',');
for (var i = 0; i < _tvalue1.length; i++) {
myvalue1[i] = _tvalue1[i];
}
var _tvalue2 = value2.split(',');
for (var i = 0; i < _tvalue2.length; i++) {
myvalue2[i] = _tvalue2[i];
}
var chart = new Highcharts.Chart('container', {
title: {
text: '不同城市的月平均氣溫',
x: -20
},
subtitle: {
text: '數據來源: WorldClimate.com',
x: -20
},
xAxis: {
categories: mycars
},
yAxis: {
title: {
text: '溫度 (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '東京',
data: eval(value1)
}, {
name: '紐約',
data: eval(value2)
}]
});
}
</script>
另外呢還有一些 小處理
1. 2條折線重覆的時候，滑鼠放上去需要都顯示數據
tooltip: {
shared: true
}
2. 去除highchat.com 網址
credits: {
enabled: false
}
3. 刷新數據的時候 需要將上次的折線圖清除
function clearTable() {
var series = chart.series;
if (series.length > 0) {
series[0].remove(false);
}
}
