码迷,mamicode.com
首页 > 其他好文 > 详细

利用Highcharts插件制作动态图表

时间:2015-03-31 08:56:09      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/

1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研究!

技术分享

 

 

技术分享

2.下面我来讲解下是如何制作的

首先需要下载并引入 highcharts.js 文件  <script src="../../Scripts/highcharts.js" type="text/javascript"></script>

 

3.后台拼接hightchart所需的数据,如下为datatable中的数据,产出面积SF和工时产出分别为highcharts中的两类数据

技术分享

          //按照highcharts可识别的格式来组装datatable中的数据
          StringBuilder categories = new StringBuilder();
          //series_SF为产出面积SF数据 StringBuilder series_SF
= new StringBuilder();
         //series_WH为工时产出数据 StringBuilder series_WH
= new StringBuilder(); Dictionary<string, string> objDic = new Dictionary<string, string>(); //循環添加highchartsX,Y轴所需的數據 for (int i = 2; i < table.Columns.Count; i++) {
            //X轴所需的數據 categories.AppendFormat(table.Columns[i].ColumnName
+ ",");

            //Y产出面积SF所需的數據
if (string.IsNullOrEmpty(table.Rows[0][i].ToString())) { series_SF.AppendFormat("0,"); } else { series_SF.AppendFormat(table.Rows[0][i].ToString() + ","); }             //Y轴 工时产出所需的數據 if (string.IsNullOrEmpty(table.Rows[2][i].ToString())) { series_WH.AppendFormat("0,"); } else { series_WH.AppendFormat(table.Rows[2][i].ToString() + ","); } } //刪除最有一個多餘的","號 if (table.Columns.Count > 0) { categories.Remove(categories.Length - 1, 1); series_SF.Remove(series_SF.Length - 1, 1); series_WH.Remove(series_WH.Length - 1, 1); } objDic.Add("categories", categories.ToString()); objDic.Add("series_SF", series_SF.ToString()); objDic.Add("series_WH", series_WH.ToString());

          //转换为json格式数据,返回给前台界面
return Common.JsonHelper.ToJson(objDic);

 

4.前台接受数据

{"categories":"03/01,03/02,03/03,03/04,03/05,03/06,03/07,03/08,03/09,03/10,03/11,03/12,03/13,03/14,03/15,03/16,03/17,03/18,03/19,03/20",

"series_SF":"0,0,0,50.94,0,47.60,8.72,0,0,8.00,0,62.96,50.94,101.88,25.47,0,0,52.50,25.47,0",

"series_WH":"0.00,0.00,0.00,2.12,0.00,1.98,0.36,0.00,0.00,0.33,0.00,2.62,2.12,4.25,1.06,0.00,0.00,2.19,1.06,0.00"}

 

5.绑定并加载highcharts

            //繪製兩個Y軸的混合圖
                    var options = {
                        chart: {
                 //将该图表绑定给id为container_day的元素 如:<div id="container_day"  style="min-width:800px;height:400px;"></div> renderTo:
container_day,
                //图表类型 zoomType:
xy }, title: {
                //图表的标题 text:
站別工時產出-日報 }, xAxis: {
                //X轴的值 在post中动态加载 categories: [] }, yAxis: [{
                //Y轴的值 在post中动态加载 labels: { style: { color:
#89A54E } }, title: { text: 產出面積SF, style: { color: #89A54E } } }, { title: { text: 工時產出, style: { color: #4572A7 } }, labels: { style: { color: #4572A7 } }, opposite: true }], tooltip: { shared: true },
              //两个Y轴的类别   series: [] };
//獲取折綫圖X,Y軸值 $.post("/PI/PDL_ProcTimeOut_highcharts", { "BDate": $("#BDate").datebox(getValue), "EDate": $("#EDate").datebox(getValue), "ProcCode": $("#ProcCode").combobox(getValue) }, function (data) { var json = eval("(" + data + ")"); //綁定X軸 var categories = json.categories.split(,); $.each(categories, function (itemNo, item) { options.xAxis.categories.push(item); }); //綁定Y軸 var series_SF = json.series_SF.split(,); var series_WH = json.series_WH.split(,); var series_0 = { data: [] }; var series_1 = { data: [] }; series_0.name = "產出面積SF"; series_0.color = "#4572A7"; series_0.type = "column", $.each(series_SF, function (itemNo, item) { series_0.data.push(parseFloat(item)); }); series_1.name = "工時產出"; series_1.color = "#89A54E"; series_1.type = "spline", series_1.yAxis = 1, $.each(series_WH, function (itemNo, item) { series_1.data.push(parseFloat(item)); }); options.series.push(series_0); options.series.push(series_1); var chart = new Highcharts.Chart(options); }); //end post

 

利用Highcharts插件制作动态图表

标签:

原文地址:http://www.cnblogs.com/MR-YY/p/4379117.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!