Question

假设我正在为2个城市做温度图。我希望每个月的最低和最高温度以及一个酒吧的平均月温度。

我找到了（并稍微改了一下）一个适用于一个城市（jsfiddle here）的例子。这就是我想要的结果。

{{1}}

但是我每个月需要两个（或更多）城市。现在，我有这个（jsfiddle here），但是平均点不是放在柱子里面，而是出现在中间的某个位置。

有没有办法如何在每个酒吧内放置平均点数的多个城市？我不知道我错过了什么。

提前致谢。

Answer 1

不是一个完美的解决方案，但应该是一个很好的起点：

(function(H) {
    H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) {
        var s = this,
            chart = s.chart,
            xAxis = s.xAxis,
            yAxis = s.yAxis,
            path, x, y,
            r = chart.renderer,
            radius = s.barW / 2;

        p.call(this);

        H.each(this.points, function(p) {
            if(p.options.avg) {

                y = yAxis.toPixels(p.options.avg * (-1), true); 
                x = p.plotX + s.columnMetrics.offset + radius;

                path = [ 
                    'M', x - radius, y - radius, 
                    'L', x + radius, y - radius,
                    'L', x + radius, y + radius,
                    'L', x - radius, y + radius,
                    'Z'
                    ];

                if(p.avgShape) {
                    p.avgShape.attr({
                        d: path
                    });
                } else {
                    p.avgShape = r.path(path).attr({
                        fill: s.options.avgColor
                    }).add(s.group);
                }
            }
        });
    });
})(Highcharts)

演示：http://jsfiddle.net/r6fha9he/3/

值得一提的是 - 值乘以*（ - 1），因为toPixels()无法识别倒置图表，我想避免使用axis.translate()。对于非倒置图表，这不是必需的。如果您对translate更感兴趣，请搜索以下源代码：

/ **
  *从轴值转换到图表上的像素位置，或返回
  *
  * /
  translate：function（val，backwards，cvsCoord，old，handleLog，pointPlacement）{

Highcharts：多个Columnrange，每个都有一个点

1 个答案: