利用highchart绘制图表

几个基本的概念


名词	描述
Title	图表的标题
Axis	坐标轴
Series	数据列，表现为图表上呈现数据的形状
Tooltip	鼠标悬停在数据点上的时候显示的一个提示框
Legend	图例
Credits	版权信息
Exporting	导出图标的按钮
PlotLines	图表上的辅助线，比如图表背景的网格或者标识出某一点数据的指示线。
PlotBands	在某些数据区域上画出的分辨带
Crosshair	跟随鼠标在图表上显示的标线，是一个隶属于坐标轴的属性
Marker	用于标识数据的点，可以设置普通状态和悬浮状态的样式

一些 hack 的手段

在真实工作中，有些设计稿里面描绘的样式不能通过简单的调整 highchart 配置或者直接使用 highchart 的绘图接口进行绘图来实现（比如调整折线图中 crosshair 和 marker 的位置）。
通过阅读源代码，我 hook 到了一个十分好用的方法， 这个方法是 chart.tooltip.refresh，每当鼠标移动到图表范围内的时候，这个方法都会被调用，我们只需要 hook 这个方法，然后再其内部对 point 的数据进行更改就可以实现我们大部分的需求了。

例子


这个是在我们需求中设计的一个图表样式，乍一看像是直方图，但又是个折线图。这里我们使用 area 面积图也就是折线图的样式来进行图表的配置。
我们注意到，这个图中 crosshair 和 marker 的位置和标准的 area 图中是有所区别的。标准的 area 图中这两东西都会显示在数据点的位置上，而在我们的图中，它们显示在了两个数据点的中间，这时候，我们 hook refresh 方法，在里面修改 point 的 plotX 值，再hook XAxis 的 drawCrosshair 方法，修改传入 drawCrosshair 中的 point 对象的 plotX 值。最后实现了居中的效果。

var offset = chart.plotWidth / (chart.pointCount - 1) / 2;
var offsetCorsshair = function(e, point) {
    if (point) {
        var originX = point.plotX;
        point.plotX += offset;
        __drawCrosshair.call(this, e, point);
        point.plotX = originX;
    }
}


chart.tooltip.refresh = function(point, mouseEvent) {
    var __setState;
    if (point.length > 0) {
        var myPoint = point[0];
        __setState = myPoint.setState;

        var originX = myPoint.plotX;
        if (myPoint.x != 5) {
            myPoint.plotX += offset;
        } else {
            myPoint.plotX += offset * 2;
        }
        myPoint.setState = __setState;
        __refresh.call(this, point, mouseEvent);
        myPoint.plotX = originX;
        __xAxis.drawCrosshair = offsetCorsshair;
    }
};