图例项目 highcharts 不提供折线图的虚线图表符号

Question

我们在单个图表中组合了面积样条线和折线图，面积图标记显示为点，但自定义为虚线图的折线图未显示标记。

  const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
                        chart: {
                           type: 'areaspline',
                            height: '312',
                            borderColor: '#FFFFFF',
                            borderWidth: 1,
                            borderRadius: 8,
                     
                        },
                        colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           startOnTick: true,
                            endOnTick: true,
                            minorTickLength: 0,
                            tickLength: 0,
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#8C99A7'
                            },
                            labels: {
                              y: 23,
                              useHTML: true,
                            
                            },
                        },
                        
                        legend: {
                          itemDistance: 50,
                          itemMarginTop: 12,
                          itemStyle: {
                            color: '#2C3241',
                           
                            fontSize: '14px',
                            fontWeight: 'normal',
                            'line-height': '16px',
                            "textOverflow": 'none',
                            "margin-right": '50px'
                          },
                          symbolWidth: 10,
                          symbolHeight: 10                              
                        },
                         yAxis: [{
                          min: 0,
                          labels: {
                          
                            useHTML: true,
                            
                          }

                        } , {
                          min: 0,
                         
                          opposite: true,
                          labels: {
                         
                            useHTML: true,
                            
                          }

                        }],

                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },

                      
                        
                        series: seriesobj


        } as any);

the series object is something like this:

static KpiSeriesData = [
  

{
         // type: 'areaspline',
          name: 'BIT Value',
          data: [],
          marker: {
                    enabled: false,
                    symbol: 'circle',
                    linewidth: 4,
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
        }, {
         // type: 'areaspline',
          name: 'Relationship Cost',
          data: [],
          marker: {
                    enabled: false,
                    symbol: 'circle',
                    linewidth: 4,
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
        }, {
          type: 'line',
          dashStyle: 'shortdash',
          name: 'Quantum Score',
          yAxis: 1,
          data: [],
           customLineLegendSymbol: true,
          marker: {
            enabled: false,
            color: '#FF9D36',
           // radius: 2,
            states: {
                        hover: {
                            enabled: true
                        }
                    },
             lineWidth: 15
          },
             lineWidth: 5
        }             
]

但是我们想要最后一个图例的虚线符号，如下图所示

无论我们对此进行什么更改，该符号都不会出现。请帮助我们

Answer 1

我设法在图例中显示虚线，只需增加

symbolWidth

属性并将区域系列的

legendSymbol

设置为

'rectangle'

。

例如：

const seriesobj = [{
  legendSymbol: 'rectangle',
  ...
}, {
  legendSymbol: 'rectangle',
  ...
}, {
  ...
}]

const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
  legend: {
    itemDistance: 50,
    itemMarginTop: 12,
    symbolWidth: 40,
    symbolHeight: 15,
    ...
  },
  series: seriesobj,
  ...
});

---

现场演示：https://jsfiddle.net/BlackLabel/c38forz5/

API 参考： https://api.highcharts.com/highcharts/series.areaspline.legendSymbol