highcharts 更新Highcarts饼图中单个图例项的样式

jdgnovmf  于 5个月前  发布在  Highcharts
关注(0)|答案(2)|浏览(83)

当鼠标悬停在饼图中的一个切片上时,我正在尝试设置相应图例项的样式。我可以使用以下plotOptions更新整个图例(所有图例项)的样式:

plotOptions: {
                series: {
                    point: {
                        events: {
                            mouseOver: function () {
                                this.series.chart.legend.update({
                                    itemStyle: {
                                        fontWeight: "bold",
                                    },
                                });
                            },
                            mouseOut: function () {
                                 this.series.chart.legend.update({
                                     itemStyle: {
                                         fontWeight: "normal",
                                     },
                                 });
                            },
                        },
                    },
                },
            },

字符串
那么,我如何访问单个项目的CSS呢?

zqdjd7g9

zqdjd7g91#

您可以使用从点到图例项的引用。例如:this.legendItem.label

plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            this.legendItem.label.css({
              fontWeight: "bold"
            });
          },
          mouseOut: function() {
            this.legendItem.label.css({
              fontWeight: "normal"
            });
          }
        }
      }
    }
  }

字符串

现场演示:https://jsfiddle.net/BlackLabel/4tevkco0/
**API引用:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#css

balp4ylt

balp4ylt2#

单独更改一个标签的一种方法是使用事件设置用户选项,然后在标签格式中使用该选项将其与其他标签区分开来。
例如,在事件中,我们设置hovering: truehovering: false。然后在格式化程序中,我们在标签名称周围应用单独的HTML来区分它,如<b>,或者您可能会使用<span>与样式。
请参见以下示例(or this JSFiddle demonstration):

Highcharts.chart('container', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            if (!this.series.userOptions.hovering) {
              this.series.update({
                hovering: true
              })
            }
          },
          mouseOut: function() {
            if (this.series.userOptions.hovering) {
              this.series.update({
                  hovering: false
              })
            }
          },
        },
      },
    },
  },

  legend: {
    labelFormatter: function() {
      if (this.userOptions.hovering) {
        return "<b>" + this.name + "</b>"
      } else {
        return this.name
      }
    }
  },

  series: [{
    data: [10, 11, 12, 13, 14, 15]
  }, {
    data: [20, 21, 22, 23, 24, 25]
  }, {
    data: [30, 31, 32, 33, 34, 35]
  }, {
    data: [1, 11, 21, 31, 41]
  }],

});

字符串

相关问题