Highcharts legend图标方块并设置自定义样式

highcharts yekong

Highcharts legend自定义样式

设置legend样式首先设置showInLegend: true Highcharts设置显示legend.

在Highcharts中,你可以通过设置legend.itemStyle属性来改变图例的样式。以下是如何设置图例图标为方块并设置字体样式的示例:

legend: {
  symbolHeight: 12,
  symbolWidth: 12,
  symbolRadius: 0,  // 设置为0使图标变为方块
  itemStyle: {
    'font-size': '14px',
    'font-family': 'MiSans',
    'font-weight': '400',
    color: '#FFFFFF',
    opacity: 0.6
  }
}

在上述代码中,symbolHeightsymbolWidth属性用于设置图例图标的大小,symbolRadius属性设置为0使图标变为方块。itemStyle属性用于设置图例文本的样式,包括字体大小、字体家族、字体权重、颜色和透明度。

完整实例代码

 drawLine() {
      var that = this;
      var chart = highcharts.chart(this.className, {
        backgroundColor: 'rgba(0,0,0,0)',
        colors: ['rgba(37, 221, 236, 1)', 'rgba(55, 160, 232, 1)', 'rgba(233, 75, 32, 1)', 'rgba(241, 154, 60, 1)', 'rgba(51, 79, 255, 1)', 'rgba(104, 242, 84, 1)'],
        chart: {
          type: 'pie',
          backgroundColor: 'rgba(0,0,0,0)',
          options3d: {
            enabled: true,
            alpha: 70,
            beta: 0
          }
        },
        title: {
          text: ''
        },

        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        legend: {
          symbolHeight: 12,
          symbolWidth: 12,
          symbolRadius: 0,  // 设置为0使图标变为方块
          itemStyle: {
            'font-size': '14px',
            'font-family': 'MiSans',
            'font-weight': '400',
            color: '#FFFFFF',
            opacity: 0.6
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            animation: true,
            cursor: 'pointer',
            showInLegend: true,  // 添加这一行
            depth: 25,
            size: '50%',
            center: ['50%', '50%'],
            dataLabels: {
              useHTML: true,
              enabled: true,
              format: '<div class="dataLabels"><b>{point.name}</b>: {point.y}</div>',
              style: {
                color: 'rgba(26, 178, 255, 1)'
              }
            },

          }
        },
        series: [{
          type: 'pie',
          name: '展示',
          data: this.dataList
        }]
      });
    }
喜欢