angular - 需要 Highcharts 中的图例为方形

Question

我已经使用 Angular 4 实现了样条图组件。我需要将图例图标显示为方形，但它显示为圆形。我觉得它是圆形的原因之一是因为，我已将标记定义为圆形。它显示绘制线的圆圈以及图例图标。我需要将其显示为绘制的线条的圆形，但图例的方形显示

我已经尝试过以下方法，但似乎并不适用。有人可以告诉我为什么它不适用吗？

legend: {
          symbolRadius: 0,
          symbolHeight: 20,
          symbolWidth: 20
        }

目前看起来是这样

需要它看起来像这样

完整代码如下

export class SplineChartComponent implements OnChanges {
    public options: any;
    chart: any;

    @Input() public series: any;
    @Input() public yaxisdata: any;

    @Input() public selectedRating: string = '';

    constructor() {
        this.options = {
            credits: {
                enabled: false
            },
            chart: {
                type: 'spline',
            },
             title:{
                 text:''
                },
                subtitle:{
                    text:''
                },
            legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 25,
                itemMarginTop: 0,
                symbolRadius: 0,
                symbolHeight: 20,
                symbolWidth: 20
            },
            yAxis: {
                categories: [
                ],
                allowDecimals: false,
            },
            tooltip: {

            },
            plotOptions: {

                series: {
            allowPointSelect: true
                  },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: true,
                         symbol: 'circle'

                    },
                }
            },
            series: [
                {
                 type: 'spline',
                 showInLegend: false
                }
            ]
        };
    }

Answer 1

在 Angualr2/Typescript 中，你必须执行以下操作

   @ViewChild('chartDiv') chartDiv: ElementRef;//get chart element
   options: Options;//assign this options to chart 

   this.options = {

      chart: {
        events: {
          load: () => {
            const elements = document.querySelectorAll('.highcharts-legend-item path');
            for (let i = 0; i < elements.length; i++) {
              elements[i].setAttribute('stroke-width', '10');

            }
          },
          redraw: () => {
            //use below if you have more then one chart and want to update specific chart only
            //  const elements = this.chartDiv.nativeElement.querySelectorAll('.highcharts-legend-item path');
            const elements = document.querySelectorAll('.highcharts-legend-item path');
            for (let i = 0; i < elements.length; i++) {
              elements[i].setAttribute('stroke-width', '10');
            }
          },
        }
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        title: {
          text: 'Temperature (°C)'
        }
      },
      legend: {
        enabled: true,
      },
      series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }]
    };

    this.chart = new Chart(this.options);

---

我尝试为图表添加事件，它对我有用

var chart = Highcharts.chart('container', {
chart: {
    events: {
        load: function () { 
        $(".highcharts-legend-item path").attr('stroke-width', 10);
    },
    redraw: function () {
        $(".highcharts-legend-item path").attr('stroke-width', 10);
    }
    }
}

请查看完整演示:working Demo ，它对我有用，可能对你有帮助

---

您可以通过将标记:{symbol : 'square',radius : 12 }, 添加到您的系列设置来使其成为正方形。

示例:

series: [{
        name: 'Tokyo',
         marker : {symbol : 'square',radius : 12 },
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        marker : {symbol : 'square',radius : 12 },
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, 
    }]

Working Demo