如何自定义高图图例的图例复选框

Question

我们正在尝试更改 highcharts 给出的图例的复选框。但除了我们给定的宽度和高度之外，复选框没有采用任何其他属性，并且背景和位置没有改变。

const bitAreaChart = Highcharts.chart('bitkpicontainer', {
                        chart: {
                            height: '304',
                       
                            events: {
                              load(this: any) {
                                this.yAxis[0].setTitle({
                                    text: "Amount (" +currency + ')',
                                    style: {
                                      'font-family': "ProximaNova-Regular",
                                      'color': '#71808C',
                                      fontSize: '12px',
                                    }
                                })
                                this.xAxis[0].update({
                                  tickPositions: this.xAxis[0].tickPositions,
                                  labels: {
                                    formatter: function(this: any) {
                                      var temp = new Date(this.value)

                                      return monthNames[temp.getMonth()]+"'"+Highcharts.dateFormat('%y', this.value);
                                    }
                                  }
                                })
                                this.series.forEach((series: any) => {
                                  series.checkbox.checked = true;
                                  series.selected = true;
                                  })
                              }
                            },
                        },
                        colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                            minorTickLength: 0,
                            tickLength: 0,
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#000000'
                            },
                            labels: {
                              y: 23,
                              style:{
                                fontSize: '12px',
                                'font-family': 'ProximaNova-Regular',
                                color: '#8C99A7',
                                'line-height': '13px',
                                textOverflow: 'none'
                              }
                            },
                        },
                         yAxis: {
                          min: 0,
                          labels: {
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Regular',
                              color: '#71808C',
                              'line-height': '11px',
                              textOverflow: 'none',
                            }
                          },
                          title: {
                            text: "",
                          }
                        },
                        legend: {
                          useHTML: true,
                          itemMarginTop: 6,
                           itemDistance: 60,
                          itemCheckboxStyle: {
                            "width": "22px",
                            "height": "22px",
                            "background-color": "#50C9E3",
                          },
                          itemStyle: {
                            color: '#2C3241',
                            'font-family': 'ProximaNova-Semibold',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            'line-height': '19px',
                            "textOverflow": 'none',
                            "margin-right": '50px',
                            "height": "17px"
                          },
                          labelFormatter: function(this: any){
                             return '<span>' + this.name +'helo <input type="checkbox" style="width: 20px; height: 20px; color: red; position: relative" />' + '</span>';
                           },
                          symbolWidth: 10,
                          symbolHeight: 10                              
                        },
                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },
                        plotOptions: {
                            series: {
                              showCheckbox: true,
                              dataLabels: {
   useHTML: true
 },
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 2,
                                    states: {
                                        hover: {
                                            enabled: true
                                        }
                                    }
                                }
                                events: {
                                  checkboxClick: function(this: any) {
                                    if (this.visible) {
                                      this.hide();
                                    } else {
                                      this.show();
                                    }
                                  },
                                  legendItemClick: function(this: any, e: any) {
                                    const chart = e.target.chart,
                                      index = e.target.index;
                                    chart.series[index].checkbox.checked = this.selected = !this.visible;
                                  }
                                }
                            }
                        },
                        series: [{
                          type: 'areaspline',
                            name: 'Behaviour Value',
                            data: bitData
                        }, {
                          type: 'areaspline',
                            name: 'Influence Value',
                            data: relationshipData
                        }, {
                          type: 'areaspline',
                            name: 'Transaction Value',
                            data: quantumData
                        }
                        // },{
                        //   type: 'line',
                        //   name: 'John',
                        //   data: quantumData
                        // }
                        ]

        }as any);

添加的代码不会更改复选框样式和位置 它看起来如下图所示 [![在此处输入图像描述][1]][1]

但是我们想要如下图所示的定制： [![在此处输入图像描述][2]][2]

我们可以在此处设置哪些属性来更改复选框，请在此处帮助我们 [1]： [2]：

Answer 1

您可以使用 Highcharts 中的图例复选框设置样式 itemCheckboxStyle 选项。您可以使用的所有 CSS 选项都可以在这里找到：https://api.highcharts.com/class-reference/Highcharts.CSSObject