原文:

向大家推荐一款js插件，用于绘制图表Highcharts，具体操作可参考官方网站：

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
        
          objDic = new Dictionary
         
          ();                //循環添加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的元素 如：
        
                            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