也是对最近几天的折线图搞得烦心，看了好多前辈的文章，也总结了一下。
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