Стиль Highcharts xrange

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

До сих пор я мог создать эту диаграмму, используя тип 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>

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

css highcharts xrange

27.05.2019 12:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

462

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить прозрачный цвет для точек и использовать цвет границы для достижения желаемого результата. Используйте 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

27.05.2019 13:32