需要高图表中的图例为方形

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 中，你必须执行以下操作

\n\n

   @ViewChild(\'chartDiv\') chartDiv: ElementRef;//get chart element\n   options: Options;//assign this options to chart \n\n   this.options = {\n\n      chart: {\n        events: {\n          load: () => {\n            const elements = document.querySelectorAll(\'.highcharts-legend-item path\');\n            for (let i = 0; i < elements.length; i++) {\n              elements[i].setAttribute(\'stroke-width\', \'10\');\n\n            }\n          },\n          redraw: () => {\n            //use below if you have more then one chart and want to update specific chart only\n            //  const elements = this.chartDiv.nativeElement.querySelectorAll(\'.highcharts-legend-item path\');\n            const elements = document.querySelectorAll(\'.highcharts-legend-item path\');\n            for (let i = 0; i < elements.length; i++) {\n              elements[i].setAttribute(\'stroke-width\', \'10\');\n            }\n          },\n        }\n      },\n      xAxis: {\n        categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\',\n          \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']\n      },\n      yAxis: {\n        title: {\n          text: \'Temperature (\xc2\xb0C)\'\n        }\n      },\n      legend: {\n        enabled: true,\n      },\n      series: [{\n        name: \'Tokyo\',\n        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]\n      }, {\n        name: \'New York\',\n        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]\n      }]\n    };\n\n    this.chart = new Chart(this.options);\n

\n\n\n\n

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

\n\n

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

\n\n

请查看完整的演示：工作演示，它对我有用，可能对您有帮助

\n\n\n\n

你可以通过添加 marker : {symbol : \'square\',radius : 12 },到你的series settings.

\n\n

例子 ：

\n\n

series: [{\n        name: \'Tokyo\',\n         marker : {symbol : \'square\',radius : 12 },\n        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]\n    }, {\n        name: \'New York\',\n        marker : {symbol : \'square\',radius : 12 },\n        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]\n    }, \n    }]\n

\n\n

工作演示

\n