如何将 Highcharts 甘特图格式化为虚线而不是实线？

Question

我使用 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
            }
        }

如果有人能帮我解决这个问题，那将是一个很大的帮助。谢谢！

Answer 1

您可以将 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

如何将 Highcharts 甘特图格式化为虚线而不是实线？

How can I format the Highcharts gantt chart to be a dashed line instead of a solid line?

javascript

highcharts

gantt-chart

angular-highcharts