Question

我必须用高图构建水平条形图，并用一些线表示每个条形的最小值和最大值不同。

我想做的最好方法是将一个带有透明条的系列放到边框上并用正确的颜色着色，但是我不知道该怎么做。到目前为止，我在所有边界上绘制了一个条形图，然后放在另一个没有边界和白色的条形图上。但是，此解决方案隐藏了垂直网格，这不是我想要的。

这是物镜的图像。我正在寻找做红线和绿线的方法。 chart

该图表的设置为

var options = {
    "chart": {"type": "column", "inverted": true, "polar": false},
    "title": {"text": ""},
    "subtitle": {"text": ""},
    "series": [{
        "name": "maximum",
        "turboThreshold": 0,
        "pointWidth": 70,
        "color": "rgba(255, 255, 255, 1)",
        "colorByPoint": false,
        "borderWidth": "10",
        "borderColor": "#b71c1c",
        "colorIndex": 0,
        "fillColor": ""
    }, {
        "name": "maximum2",
        "turboThreshold": 0,
        "pointWidth": 80,
        "lineColor": null,
        "color": "#ffffff",
        "borderColor": "#eceff1",
        "borderWidth": "0",
        "zThreshold": 0,
        "type": "",
        "shape": "",
        "shadow": false
    }, {
        "name": "minimum",
        "turboThreshold": 0,
        "pointWidth": 70,
        "color": "#bbdefb",
        "borderColor": "#1b5e20",
        "borderWidth": "10"
    }, {
        "name": "minimum2",
        "turboThreshold": 0,
        "pointWidth": 80,
        "color": "#ffffff",
        "zThreshold": 0
    }, {"name": "avg", "turboThreshold": 0, "pointWidth": 50, "color": "#bbdefb"}, {
        "name": "best",
        "turboThreshold": 0,
        "pointWidth": 50,
        "color": "#64b5f6"
    }, {"name": "mine", "turboThreshold": 0, "pointWidth": 25, "color": "#0d47a1"}],
    "plotOptions": {"column": {"groupPadding": 0.5, "pointPadding": 0.1}},
    "data": {
        "csv": "\"series\";\"maximum\";\"maximum2\";\"minimum\";\"minimum2\";\"avg\";\"best\";\"mine\"\n\"series1\";8;8;1;1;4.9;2;5\n\"series2\";5;5;1;1;3;1;2\n\"series3\";10;10;1;1;5;2;3",
        "googleSpreadsheetKey": false,
        "googleSpreadsheetWorksheet": false
    },
    "yAxis": [{}],
    "pane": {"background": []},
    "responsive": {"rules": []}
};
new Highcharts.Chart("highcharts-e3896764-618b-48e8-9545-031ab2433d34", options);

和实时https://jsfiddle.net/ryu3L09e

有人可以解决吗？也许设置了正确的边框，所以我不必做两个系列或更改“ z-index”，就像在网格之前将白色和带边框的系列在背景中移动一样。谢谢

Answer 1

您还可以添加预定义的标记符号并使用scatter系列类型：

Highcharts.SVGRenderer.prototype.symbols.rectangle = function(x, y, w, h) {
    return [
        'M', x - w, y,
        'L', x + w * 2, y,
        x + w * 2, y + h,
        x - w, y + h,
        'Z'
    ];
}

实时演示： http://jsfiddle.net/BlackLabel/5dg412hz/

或使用内置的bullet图表类型：https://www.highcharts.com/docs/chart-and-series-types/bullet-chart

Answer 2

一种骇人听闻的方法是使用columnrange系列来表示最小/最大。

通过以下修改，我做了and example：

添加了Highcharts-more模块：

<script src="https://code.highcharts.com/highcharts-more.js"></script>

删除了系列minimum2和maximum2

在minimum和maximum系列中添加了以下内容：

minPointLength: 1,
grouping: false,
type: "columnrange"

在海图中仅显示一格的一个边框

2 个答案: