.net输出相互独立的多个柱状图（基于highcharts)

来源：互联网发布：apache kylin 编辑：程序博客网时间：2024/06/10 21:29
首先引用highcharts的主脚本，此处略。
以下为封装代码：
/// <summary>        /// 输出相互独立的多个柱形图        /// </summary>        /// <param name="containerId">容器ID</param>        /// <param name="title">图表主标题</param>        /// <param name="yAxis">y轴值</param>        /// <param name="xname">x轴下面的说明</param>        /// <param name="dataStr">数据列表,须此种格式：{y: 55.11,color: colors[0]}, {y: 21.63,color: colors[1]}, {y: 11.94,color: colors[2]}</param>        /// <param name="groupStr">分组列表，须此种格式：'MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'</param>        /// <param name="clickScript">点击后事件中的脚本</param>        /// <param name="isNeedClick">是否需要加上点击事件</param>        /// <returns></returns>        public static string GetColumnChar(string containerId, string title, string yAxis, string xname, string dataStr, string groupStr,bool isNeedShowLend=true,bool isNeedClick=false,string clickScript="")        {            StringBuilder sb = new StringBuilder();            sb.Append("var colors = ['#ba55d3','#4b0082','#7b68ee','#b8860b','#6a5acd','#0000cd','#4169e1','#6495ed','#9400d3','#228b22','#d2691e','#ff6347','#a52a2a','#8a2be2','#9932cc','#556b2f','#00bfff','#483d8b','#0000ff'],\r\n");            sb.Append("categories = ["+groupStr+"],\r\n");            sb.Append("name = '"+xname+"',\r\n");            sb.Append("data = ["+dataStr+"];\r\n");            sb.Append("function setChart(name, categories, data, color) {\r\n");            sb.Append("chart.xAxis[0].setCategories(categories, false);\r\n");            sb.Append("chart.series[0].remove(false);\r\n");            sb.Append("chart.addSeries({name: name,data: data,color: color || 'white'}, false);\r\n");            sb.Append("chart.redraw();\r\n");            sb.Append("    }\r\n");            sb.Append("    var chart = $('#"+containerId+"').highcharts({\r\n");            sb.Append("chart: {type: 'column'},\r\n");            sb.Append("title: {text: '"+title+"'},\r\n");            sb.Append("xAxis: {categories: categories},\r\n");            sb.Append("yAxis: {\r\n");            sb.Append("            title: {text: '"+yAxis+"'}\r\n");            sb.Append("        },\r\n");            sb.Append("        plotOptions: {\r\n");            sb.Append("            column: {\r\n");            sb.Append("                cursor: 'pointer',\r\n");            sb.Append("                point: {\r\n");            if (isNeedClick)            {                sb.Append("                    events: {\r\n");                sb.Append("                    click: function(e) {\r\n");                sb.Append(clickScript);                sb.Append("                          }\r\n");                sb.Append("                    }");            }            sb.Append("                },\r\n");            sb.Append("                dataLabels: {\r\n");            sb.Append("                    enabled: true,\r\n");            sb.Append("                    color: '#000',\r\n");            sb.Append("                    style: {\r\n");            sb.Append("                        fontWeight: 'bold'\r\n");            sb.Append("                    },\r\n");            sb.Append("                    formatter: function() {\r\n");            sb.Append("                        return this.y;\r\n");            sb.Append("                    }\r\n");            sb.Append("                }\r\n");            sb.Append("            }\r\n");            sb.Append("        },\r\n");            sb.Append("        tooltip: {\r\n");            sb.Append("            formatter: function() {\r\n");            sb.Append("                var point = this.point,\r\n");            sb.Append("                    s = this.x +':<b>'+ this.y +' </b><br/>';\r\n");            sb.Append("                return s;\r\n");            sb.Append("            }\r\n");            sb.Append("        },\r\n");            sb.Append("        series: [{\r\n");            sb.Append("            name: name,\r\n");            sb.Append("            data: data,\r\n");            sb.Append("            color: 'white'\r\n");            sb.Append("        }],\r\n");            sb.Append("credits: { enabled: false },\r\n");            sb.Append("        exporting: {            enabled: false        }\r\n");            if (isNeedShowLend)            {                sb.Append(",legend:{enabled:fase}\r\n");            }                        sb.Append("    })\r\n");            sb.Append("    .highcharts(); // return chart\r\n");            return sb.ToString();        }
0 0