C#编程--Highcharts图表控件

一、 图表主要组成：

一般情况下，highcharts包含标题（title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

highcharts基本组成部分如下图所示：

1. 数据提示框（Tooltip）：

当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全通过格式化函数动态指定。

2. 导出功能（Exporting）:

通过引入exporting.js即可增加图表导出为常见文件功能。

3.标示线（PlotLine）:

可以在图表上增加一条标示线，比如平均值线，最高值线等。

4. 表示区域（PlotBands）:

可以在图表中添加不同颜色的区域带，表示出明显的范围区域。

二、图表配置：

1. 图表容器：

Highcharts 实例化中绑定容器的方式有很多种方式，这里列举三种：

(1) 通过构造函数

     var charts = Highcharts.chart('container',{
                   //Highcharts 配置。
                  })

(2) 通过chart.renderTo来指定

      var charts = Highcharts.chart({
              // Highcharts 配置
                   chart : {
                        renderTo : 'container'  // 或 document.getElementById('container')
                           }
                 });

(3) 如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用

        $("#container").highcharts({
          // Highcharts 配置  
        }); 

2. 图表的样式：

(1) 宽度、高度

Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的，即：

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

如果容器没有设定宽高，默认是 宽 400px， 高 400px，另外设置容器的 min-width 属性可以让 highcharts 自适应宽度，实例：

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

特别说明：饼图中可以通过设置宽高来让图形填充满整个容器。

(2) 图表样式：

图表样式属性包括 border、backgroundColor、margin、spacing、style等

• 边框：包括 borderColor、borderRadius、borderWidth
• 背景：包括 backgroundColor
• 外边距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
• 内边距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
• 其他样式：其他属性例如字体等属性，实例代码

(3) 图表绘图区

图表绘图区的可配置属性有：

• plotBackgroundColor ： 绘图区背景颜色
• plotBackgroundImage ： 绘图区背景图片
• plotBorderColor ： 绘图区边框颜色
• plotBorderWidth ： 绘图区边框宽度
• plotShadow ： 绘图投影

三、事件

• click ：图表点击事件；
• load ：图表加载完后事件；
• addSeries ：图表增加序列事件；
• drilldown ：图表下钻事件
• drillup ： 图表上钻事件；
• redraw ：图表重绘事件
• selection ： 图表范围选择事件；
• beforePrint ： 图表打印前事件
• afterPrint ： 图表打印后事件

四、 其他配置

1、图表类型

通过 chart.type 来指定图表类型，表示如果默认图表类型。

2、图表缩放：

图表缩放包括缩放（zoom）和平移（pan），对应的属性有：

• zoomType ： 缩放类型，值可以是 “x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放；
• 缩放恢复按钮：可以指定按钮的样式、位置等，见 resetZoomButton，按钮的文字可以通过 lang 中的属性来指定
• selectionMarkerFill ：选中背景色，详细参考 API 文档
• panKey：平移键，默认是 “Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作
• panning ： 是否启用平移，启用平移后，按住平移键，然后就可以用鼠标对图表进行平移操作（即平移操作是平移键加鼠标拖动）

五、标题

标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。设置代码示例如下：

title: {
    text: '我是标题'
},
subtitle: {
    text: '我是副标题'
}

六、坐标轴

1. 坐标轴标题：

xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}

2、 坐标轴刻度标签

坐标轴标签（分类）。labels常用属性有enabled、formatter、step、staggerLines

1) enable

是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。

2) Formatter(标签格式化函数)

默认实现是：

formatter:function(){
    return this.value;
}

3) Step

Labels 显示间隔，数据类型为number(或int)。下图说明了step的用法和作用

4) staggerLines

水平轴 Labels 显示行数。（该属性只对水平轴有效）当 Lables 内容过多时，可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines属性。