.net输出分组比较的柱形图（基于highcharts)

来源：互联网发布：东京电视台知乎编辑：程序博客网时间：2024/06/06 08:23
首先要引用highcharts的脚本，此处略；
以下是封装的代码：
/// <summary>        /// 输出多组相互比较的柱状图，如四个机组在第一季度中的对比，即显示三组柱形，每组四个柱形        /// </summary>        /// <param name="containerId">容器ID</param>        /// <param name="title">标题</param>        /// <param name="yAxis">Y轴内容</param>        /// <param name="dataStr">数据，形式如：{name: '一号机组',data: [49.9, 71.5, 106.4]}, {name: '二号机组',data: [83.6, 78.8, 98.5]}</param>        /// <param name="groupStr">分组,形式如：'2014-12','2013-12','2012-12'</param>        /// <returns></returns>        public static string GetColumnCharByGroup(string containerId, string title, string yAxis, string dataStr, string groupStr)        {            StringBuilder sb = new StringBuilder();            sb.Append("    $('#" + containerId + "').highcharts({\r\n");            sb.Append("        chart: {\r\n");            sb.Append("            type: 'column'\r\n");            sb.Append("        },\r\n");            sb.Append("        title: {\r\n");            sb.Append("            text: '"+title+"'\r\n");            sb.Append("        },\r\n");            sb.Append("        xAxis: {\r\n");            sb.Append("            categories: [\r\n");            sb.Append(groupStr+"\r\n");            sb.Append("            ]\r\n");            sb.Append("        },\r\n");            sb.Append("        yAxis: {\r\n");            sb.Append("            min: 0,\r\n");            sb.Append("            title: {\r\n");            sb.Append("                text: '"+yAxis+"'\r\n");            sb.Append("            }\r\n");            sb.Append("        },\r\n");            sb.Append("        tooltip: {\r\n");            sb.Append("        headerFormat: '<span style=\"font-size:10px\">{point.key}</span><table>',\r\n");            sb.Append("        pointFormat: '<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td>' +'<td style=\"padding:0\"><b>{point.y:.1f}</b></td></tr>',\r\n");            sb.Append("            footerFormat: '</table>',\r\n");            sb.Append("            shared: true,\r\n");            sb.Append("            useHTML: true\r\n");            sb.Append("        },\r\n");            sb.Append("        plotOptions: {\r\n");            sb.Append("            column: {\r\n");            sb.Append("                pointPadding: 0.2,\r\n");            sb.Append("                borderWidth: 0\r\n");            sb.Append("            }\r\n");            sb.Append("        },\r\n");            sb.Append("        series: [\r\n");            sb.Append(dataStr + "\r\n");            sb.Append("        ],\r\n");            ////在柱形正转90度显示值            //sb.Append("            dataLabels: {\r\n");            //sb.Append("                enabled: true,\r\n");            //sb.Append("                rotation: -90,\r\n");            //sb.Append("                color: '#FFFFFF',\r\n");            //sb.Append("                align: 'right',\r\n");            //sb.Append("                x: 4,\r\n");            //sb.Append("                y: 10,\r\n");            //sb.Append("                style: {\r\n");            //sb.Append("                    fontSize: '13px',\r\n");            //sb.Append("                    fontFamily: 'Verdana, sans-serif',\r\n");            //sb.Append("                    textShadow: '0 0 3px black'\r\n");            //sb.Append("                }\r\n");            //sb.Append("            }\r\n");            sb.Append("credits: { enabled: false },\r\n");            sb.Append("        exporting: {            enabled: false        }\r\n");            sb.Append("    });\r\n");            return sb.ToString();        }
0 0