Highcharts Xrange Стиль - PullRequest
Новая
       41

Highcharts Xrange Стиль

0 голосов
/ 27 мая 2019

Я хочу отобразить мой старший график, как показано ниже.Для этого я использую старшую диаграмму типа «xrange».Я пытаюсь отобразить событие для каждой точки данных, где будут начальные данные и конечная дата.

enter image description here

Пока я смогчтобы создать эту диаграмму, используя тип xrange, но я не смог получить точное отображение, как на картинке выше.Ниже мой код, 

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: ''
    },
    xAxis: {
        visible: false
    },
    yAxis: {
        visible: false
    },
    legend: {
        enabled: false
    },
    series: [{
        name: '',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            color: 'rgba(230, 141, 11, 0.5)',
            pointWidth: 10
        }, {
            x: Date.UTC(2014, 10, 26),
            x2: Date.UTC(2014, 11, 5),
            color: 'rgba(228, 53, 70, 0.5)',
            y: 0,
            pointWidth: 10
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 10),
            color: 'rgba(40, 167, 69, 0.5)',
            y: 0,
            pointWidth: 10
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            color: 'rgba(40, 147, 164, 0.5)',
            y: 0,
            pointWidth: 10
        }],
        dataLabels: {
            enabled: false
        }
    }]

});
@import 'https://code.highcharts.com/css/highcharts.css';

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

<div id="container"></div>

Есть ли способ изменить мою реализацию в старшей диаграмме, чтобы получить вывод, подобный приведенному выше?

1 Ответ

1 голос
/ 27 мая 2019

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

xAxis: {
    visible: true,
    tickLength: 0,
    lineWidth: 6,
    lineColor: '#000',
    labels: {
        enabled: false
    }
},
series: [{
    borderWidth: 6,
    data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0,
        color: 'transparent',
        borderColor: 'rgba(230, 141, 11, 0.5)'
    }, ...],
    ...
}]

Демо: http://jsfiddle.net/BlackLabel/8p0weh7s/

Справочник по API:

https://api.highcharts.com/highcharts/series.xrange.borderColor

https://api.highcharts.com/highcharts/xAxis.labels.enabled

...