Question

这是我的函数，可在我的html中呈现甜甜圈高图表。我可以将动态颜色添加到图例标记/图标。但是现在我还需要将动态颜色添加到图例标题中。我可以弄清楚。

我该怎么做？请帮忙!!!

    const chart = new Highcharts.Chart(
      {
        chart: {
          color: '#000',
          backgroundColor: '#336196',
          renderTo: 'container',
          type: 'pie'
        },
        title: {
          text: "What's using data",
          style: {
            color: '#000'
          }
        },
        yAxis: {
          title: {
            text: 'Total percent market share'
          }
        },
        plotOptions: {
          pie: {
            shadow: false,
            borderColor: null
          }
        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + this.y + ' %'
          }
        },
        legend: {
          align: 'right',
          layout: 'vertical',
          verticalAlign: 'middle',
          symbolRadius: 0,
          symbolPadding: 10,
          itemMarginTop: 15,
          itemStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Browsers',
            data: data,
            size: '120%',
            innerSize: '60%',
            showInLegend: true,
            dataLabels: {
              enabled: false
            },
            marker: {
              symbol: 'square',
              radius: 12
            }
          }
        ]
      },
      function(chart) {
        var textX = chart.plotLeft + chart.plotWidth * 0.5
        var textY = chart.plotTop + chart.plotHeight * 0.52

        var span =
          '<div id="pieChartInfoText" style="position:absolute; text-align:center;">'
        span +=
          '<div style="color:#fff;font-size: 20px;width:50pxmargin-top:36px;margin-left:18px;"></div><br>'
        span += '</div>'

        $('#addText').append(span)
        span = $('#pieChartInfoText')
        span.css('left', textX + span.width() * -0.5)
        span.css('top', textY + span.height() * -0.5)
      }
    )

任何帮助将不胜感激。谢谢！！！

Answer 1

要更改图例颜色标题，只需设置：

    legend: {
        title: {
            text: 'legend title',
            style: {
                color: 'red'
            }
        }
    }

但是，如果要更改单个图例项文本，则需要使用：

function(chart) {
    var legendItems = $(".highcharts-legend-item");
    $(legendItems[0].children[0]).css('fill', 'red');
}

实时演示：http://jsfiddle.net/BlackLabel/avhtLm3w/

Answer 2

Docs.

title:{
  text: 'Something',
  style: {"color": "#003C71", "fontSize": "18px"}
}

这可以解决问题

需要更改标题颜色甜甜圈标记图

2 个答案: