Как отформатировать диаграмму Ганта Highcharts так, чтобы она была пунктирной линией вместо сплошной?

Я сделал следующую диаграмму Ганта, используя диаграмму Ганта Highcharts. Однако я хочу, чтобы часть линии была пунктирной, а не сплошной. Что-то вроде этого - Однако я не могу сделать это разбитым. Он всегда кажется твердым. Как сделать штриховой штрих и только его часть?

Ниже приведен мой текущий вариант диаграммы. 'this.series' - это данные, которые я предоставляю диаграмме.

{
            chart: {
                type: 'gantt',
            title: {
                text: 'Gantt Chart with Progress Indicators'
            },
            xAxis: [{
                min: Date.UTC(2016, 1, 1),
                max: Date.UTC(2016, 1, 1) + this.day * 365 * 6,
                // max: Date.UTC(2039, 12, 31),
                tickInterval: this.day * 365, // 1 year
                scrollbar: {
                    enabled: true,
                    barBorderRadius: 4,
                    height: 9,
                    minWidth: 9,
                    barBackgroundColor: '#333',
                    trackBackgroundColor: '#F2F2F2',
                    margin: -12,
                    buttonBackgroundColor: 'none',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'none',
                    buttonBorderRadius: 0,
                    showFull: false

                },
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    style: {
                        fontFamily: 'Helvetica',
                        fontSize: 13,
                        color: '#333333',
                        minWidth: '160px',
                        fontWeight: 'bold'
                        // textOverflow: 'ellipsis'
                    }
                },
           }],
            yAxis: {
                type: 'category',
                grid: {
                    cellHeight: 44,
                    columns: [{
                        title: {
                            text: 'Study ID',
                            style: {
                                fontFamily: 'Helvetica',
                                fontSize: 13,
                                color: '#333333',
                                width: '160px',
                                fontWeight: 'bold'
                             }
                        },
                        labels: {
                            format: '{point.nct_id}',
                        }
                        // categories: this.map(this.series, function (s) {
                        //     return s.name;
                        // })
                    }],
                },
                min: 0,
                max: 10,
                scrollbar: {
                    enabled: true,
                    barBorderRadius: 4,
                    height: 9,
                    minWidth: 9,
                    barBackgroundColor: '#333',
                    trackBackgroundColor: '#F2F2F2',
                    margin: -10,
                    buttonBackgroundColor: 'none',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'none',
                    buttonBorderRadius: 0,

                },
                labels: {
                    style: {
                        fontFamily: 'Helvetica',
                        fontSize: 14,
                        color: '#007BFF',
                        minWidth: '160px',
                        textOverflow: 'ellipsis'
                    }
                },
          },
            plotOptions: {
                gantt: {

                },
            },
            series: [{
                name: 'Project 1',
                type: 'gantt',
                data: this.series,
                dataLabels: [{
                    enabled: true,
                    format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-left: -12px; background: #0E4A91;"></div>',
                    useHTML: true,
                    align: 'left'
                }, {
                    enabled: true,
                    format: '<div style="width: 16px; height: 16px; overflow: hidden; border-radius: 50%; margin-right: -12px; background: #0E4A91"></div>',
                    useHTML: true,
                    align: 'right',
                    style: {
                        overflow: 'hidden'
                    }
                }],
            }],
            credits: {
                enabled: false
            }
        }

Было бы большим подспорьем, если бы кто-нибудь мог мне в этом помочь. Спасибо!


javascript highcharts gantt-chart angular-highcharts
person Shubham Singh    schedule 18.11.2019    source источник
comment
Вот пример того, как я хочу, чтобы он выглядел - ссылка   -  person Shubham Singh    schedule 18.11.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать серию line с zones:

series: [{
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
        value: Date.UTC(2014, 10, 28)
    }, {
        dashStyle: 'dot',
        value: Date.UTC(2014, 10, 29)
    }],
    data: [{
        x: Date.UTC(2014, 10, 27),
        y: 0
    }, {
        x: Date.UTC(2014, 10, 29),
        y: 0
    }]
}, ...]

Интерактивная демонстрация: https://jsfiddle.net/BlackLabel/b7xdcjpt/

Справочник по API: https://api.highcharts.com/highcharts/series.line.zones

person ppotaczek    schedule 19.11.2019
comment
Потрясающий! Большое спасибо. Но у меня есть еще один вопрос. Как я могу контролировать расстояние между двумя столбцами на гистограмме? Я знаю о PointPadding, но это единообразно во всей таблице, верно? Я хочу динамическое решение. Я хочу, чтобы между любыми двумя полосами был разный интервал. Как я могу установить переменный интервал между полосами? Пожалуйста помоги. Спасибо! - person Shubham Singh; 26.11.2019
comment
Привет, @Shubham Singh! Вы можете контролировать расстояние с помощью значения x: jsfiddle.net/BlackLabel/Ljoqf3tm - person ppotaczek; 26.11.2019