首先引用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();
}