Показывать только одну границу одного бара в старших чартах - PullRequest
1 голос
/ 04 июля 2019

Мне нужно построить горизонтальную гистограмму с высокими диаграммами, а также с несколькими линиями, чтобы указать минимальные и максимальные значения, которые не совпадают для каждого бара.

Лучший способ, который я себе представлял, - это поставить серию с прозрачной полосой и сделать границу правильного цвета, но я не могу понять, как это сделать. До сих пор я делал бар со всеми границами, а затем ставил поверх другого бара без границ и белого цвета. Однако это решение скрывает вертикальную сетку, и это не то, что я хочу.

Вот изображение цели. Я ищу способ сделать красные и зеленые линии. 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», например, перемещать белые и граничные серии на заднем плане перед сеткой. Спасибо

Ответы [ 2 ]

2 голосов
/ 04 июля 2019

Вы также можете добавить предопределенный символ маркера и использовать 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

1 голос
/ 04 июля 2019

Один хакерский способ - вместо этого использовать серию columnrange для указания минимума / максимума.

Со следующими изменениями я сделал и пример :

  • Добавлен модуль Highcharts-more:

    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    
  • Удалены серии minimum2 и maximum2

  • В серии minimum и maximum добавлено следующее:

    minPointLength: 1,
    grouping: false,
    type: "columnrange"
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...