也是對最近幾天的折線圖搞得煩心，看了好多前輩的文章，也總結了一下。 1.先看後臺程式，這是我模擬的一些參數 就是一個字元串。沒啥好說的 2.主要是前臺的數據綁定 第一種方式： 1.其中頭文件中加了 no-data-to-display.src.js 這個文件，表示如果在沒有數據的時候會自動顯示 暫無 ...
也是對最近幾天的折線圖搞得煩心，看了好多前輩的文章，也總結了一下。
1.先看後臺程式，這是我模擬的一些參數 就是一個字元串。沒啥好說的
public ActionResult Index2() { string[] key = { "2017-08-01", "2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", "2017-08-09", "2017-08-10" }; double[] V1 = { 4.3, 1.2, 1.3, 1.6, 7.6, 5.9, 9.0, 22, 10, 11 }; double[] V2 = { 5.3, 1.9, 1.3, 1.4, 7.6, 0.4, 9.0, 22, 14, 12 }; string json = "{\"rows\":["; for (int i = 0; i < key.Count(); i++) { json += "{\"atrname\":\"" + key[i] + "\",\"clickvalue\":\"" + V1[i] + "\",\"impvalue\":\"" + V2[i] + "\"},"; } json = json.TrimEnd(','); json += "]}"; return Content(json); }
2.主要是前臺的數據綁定
第一種方式：
1.其中頭文件中加了 no-data-to-display.src.js 這個文件，表示如果在沒有數據的時候會自動顯示 暫無數據
lang: { noData: "暫無數據" },
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
2.請註意看現在的 series: [{}] 的值是這樣的，因為如果是[]，這樣就不會有數據顯示 用這種方式顯示數據的時候
//這種方式必須預設有數據的時候才能顯示
oOptions.series[0].name = "第三條";
oOptions.series[0].data = clickvalue;
3.var oSeries = {
// name: "第二條",
// data: clickvalue
//};
//oChart.addSeries(oSeries);
用這種方式 賦值的時候 series: [{}] 這樣的時候，雖然顯示一條折線圖，但是右邊會顯示一個折線的表示。series:[] 這樣就不會顯示
用這種方式賦值的時候//oChart = new Highcharts.Chart(oOptions); 要去掉 或者 放到上面執行。
4.第三種方式 series:[] 或者series:[{}]都可以實現
@{ 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/no-data-to-display.src.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"> var oChart = null; var oOptions = { chart: { renderTo: 'container', //設置顯示的頁面塊 type: 'line' }, //圖標標題 title: {}, credits: { enabled: false }, tooltip: { shared: true }, lang: { noData: "暫無數據" }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, //x軸 xAxis: { title: {} }, //y軸 yAxis: { title: {} }, //數據列 series: [] }; $(document).ready(function () { oChart = new Highcharts.Chart(oOptions); requestData(); }); //新的折線圖 function requestData() { oChart.showLoading(); $.ajax({ url: '/Home/Index2', type: 'POST', dataType: 'json', async: false, //同步處理後面才能處理新添加的series data: null, success: function (rntData) { var xatrnames = []; var clickvalue = []; var impvalue = []; for (var i = 0; i < rntData.rows.length; i++) { xatrnames.push([ rntData.rows[i].atrname ]); clickvalue.push([ parseFloat(rntData.rows[i].clickvalue) ]); impvalue.push([ parseFloat(rntData.rows[i].impvalue) ]); } alert(xatrnames + clickvalue); oOptions.title.text = "標題"; oOptions.xAxis.title.text = "x軸標題"; oOptions.xAxis.categories = xatrnames;//x軸數據 //這種方式必須預設有數據的時候才能顯示 oOptions.series[0].name = "第三條"; oOptions.series[0].data = clickvalue; //必須有2條線的時候才會顯示 oOptions.series[1].name = "第三條"; oOptions.series[1].data = clickvalue; //這種方式為添加，每次只能添加一條 //var oSeries = { // name: "第二條", // data: clickvalue //}; //oChart.addSeries(oSeries); //此處可以用迴圈寫入也可以的 迴圈賦值多個可以從0開始 //oOptions.series = new Array(); //oOptions.series[0] = new Object(); //oOptions.series[0].name = "點擊"; //oOptions.series[0].data = clickvalue; //oOptions.series[1] = new Object(); //oOptions.series[1].name = "展示"; //oOptions.series[1].data = impvalue; //第二種方式的時候要去掉，或者放到上面先執行 //oChart = new Highcharts.Chart(oOptions); }, error: function (jqXHR, textStatus, errorThrown) { } }); oChart.hideLoading(); } </script>
後面我會把我的demo放上去 希望有錯誤的地方大家可以指正我，共同進步
下載鏈接：http://pan.baidu.com/s/1jHYFjE2
