HighCharts使用心得（2018年10月21日 星期日 阴）

HighCharts使用心得

Highcharts 中文官网是由 简数科技 提供的 Highcharts 综合性服务网站，是由 HIGHSOFT 指定的中国地区唯一的官方网站，全面负责 Highcharts 系列软件在中国地区的商业运作、市场推广、技术服务等各项业务。Highcharts 中文官网前身是 Highcharts 中文网，最早是在 2013 年 9月上线并一直为国内用户提供服务。
本文相关连接：HighCharts柱形图链接

首先在项目Html页面增加 div 标签，并设置 id。
然后在 script 标签中，采用 id 选择器绑定事件。

<div id="container" style="min-width: 400px;height: 400px"></div>

<script>
    $(function () {
        $('#container').highcharts({
            chart: {
              type: 'column',
              inverted: true
            },
            title: {
              text: '统计排行',
              style: {
                fontSize: "26px",
                height: 'auto'
              }
            },
            xAxis: {
                lineColor: '#a31313',
                //x轴输出的数据（坐标值）
                categories: [@Html.Raw(disname)],
                title: {
                    text: null
                },
                //线宽度
                lineWidth: 3,
                tickLength: 0
            },
            yAxis: {
                title: {
                  //y轴图例显示单位
                  text: '已被发布件数（件）',
                  align: 'high'
                },
                allowDecimals: false,
                Labels: true,
                gridLineDashStyle: 'longdash',
                lineWidth: 3,
                lineColor: '#a31313'
            },
            tooltip: {
              //漂浮图例的单位显示
              valueSuffix: ' 件',
              borderColor: "#a31313",
              borderWidth: 3
            },
            plotOptions: {
              column: {
                pointWidth:30,
                dataLabels: {
                  enabled: true,
                  inside: true,
                  color:'#fff',
                   //允许数据标签重叠
                  allowOverlap: true,
                  //在柱形图边上显示单位
                  formatter: function () {
                    return  this.y+ '件';
                  }

                }
              },
              series: {
                color: "#a31313",
                events: {
                  legendItemClick: function (e) {
                    return false;
                  }
                }
              },
              line: {
                dataLabels: {
                  enabled: true
                }
              }
            },
            series: [{
                //JSON绑定数据（例子示意）识别name和data
                //name: '1800 年',
                //data: [107, 31, 635, 203, 2]
                @Html.Raw(ViewBag.series)
            }]
        });
    });
</script>

  首次使用 HighCharts 图表展示插件。根据官网查询相关字段含义，并对其属性进行编辑。

当时项目需求：

• 实现统计排行功能