highcharts美化柱状图

        设计稿：

        打算基于highcharts的柱状图做调整，先调整一下y轴的样式：

        刷新页面样式没有问题，接下来调整x轴样式。Load函数中this的axes属性包含x轴，y轴的信息。它的axisLine是轴线的绘制信息，为线条添加渐变色：

        浏览器页面更新后，x轴线条没有绘制出来，初步判断自己声明的渐变没有加入进去，将线条stroke换成highcharts现有渐变内容，发现还是没有绘制出来，猜测stroke无法设置渐变色。看了网上方法也是给fill赋值渐变色，给线条的fill设置为渐变色的内容：

        x轴线条绘制出来，但颜色是灰色，不是渐变的：

        打印highcharts信息，根据上图可以看到x轴的绘制内容是一条线，是没有fill的空间的。修改x轴的线条绘制：

        更新后，发现x轴的渐变效果出来了。然后，修改柱子的样式。Axes[1]为y轴的信息，width是y轴的长度。通过遍历series[0].data，获取每个柱子的信息，data的graphic.x和graphic.y对应的是柱子右下角柱子的绘制位置，设置spliceBottom为与x轴的间隔，设置triangleLength为柱子顶部棱形对角线长度的一半，绘制柱子外部的壳：

代码

效果

        可以看到壳子下面的长方形有露白，多次尝试，发现这种绘制设置fill无法给整个壳子填满颜色，拆成两部分绘制：

代码

效果

        壳子绘制正常了，可以看到柱子的边框是白色的，而且和x轴衔接在一起，调整一下柱子的样式：

代码

效果

        目前，按计算稿实现了。调整浏览器页面大小，图形变成这样了：

        在redraw函数内将壳子移除，除了不用在向SVG添加渐变色外，load其他的操作再执行一遍就可以了：

        后面发现鼠标移入后，tooltip不展示。因为柱子的壳盖住柱子，柱子无法监听鼠标移入的事件了。找了半天，没有发现highcharts可以触发鼠标移入的配置。后面打算js触发path标签的鼠标移入事件，打印path标签的click、trigger发现都是undefined，这种方式也行不通了。

        先不加上壳子，移入鼠标，发现有上图的元素，打算在js里面去修改这个元素的信息。后面发现，SVG里不会一开始就加入这个元素，需要触发移入。但是我把壳子加上后，肯定不会触发，感觉好像只能自己写一个了。
        向壳子元素写入会用到的数据：

        向容器添加鼠标移入事件：

        自定义的tooltip元素：

        处理tooltip元素的显示位置：

        自己编写关于鼠标移入显示tooltip的这部分代码不需要在redraw函数执行。

        参考：
                如果美化你的图标，关于SVG渐变你需要了解的一切！：https://zhuanlan.zhihu.com/p/515854742