HighCharts API 餅圖 CSS 如何使用 Z99938282F04071859941E18F16EF 向下鑽取標簽

Question

我使用 highcharts 制作了一個餅圖，並使用以下選項制作了一個圖表

chart: {
          type: 'pie',
       },

我添加了以下選項來更改文本的寬度，這迫使每個單詞位於不同的行

plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.name} {point.y}',
              style: {
                width: 50,
                fontSize: '20px',
              },
             }
            }

我嘗試通過向樣式添加顏色屬性來更改 label 的顏色，但它不會改變顏色。 我將如何更改顏色以及文本下划線？

這是我正在談論的 label 在我的 highcharts 餅圖上，

謝謝，還有一個額外的問題是，有沒有辦法可以在餅圖中間制作一個巨大的白色圓圈？ 有點像在甜甜圈上打洞？

Answer 1

label 顏色由dataLabels.color配置：

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      color: 'green', 👈
    }
  }
}

演示 1

或dataLabels.style.color ：

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      style: {
        color: 'green', 👈
      }
    }
  }
}

演示 2

對於向下鑽取餅圖，label 顏色由plotOptions.series.dataLabels.color和series.data[].dataLabels.color （其中每個數據點可以有自己的顏色配置）：

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y:.1f}%',
      color: 'green', 👈
    }
  }
},

series: [
  {
    name: "Browsers",
    colorByPoint: true,
    data: [
      {
        name: "Chrome",
        y: 62.74,
        drilldown: "Chrome",
        dataLabels: {
          color: 'green', 👈
        }
      },
      {
        name: "Firefox",
        y: 10.57,
        drilldown: "Firefox",
        dataLabels: {
          color: 'green', 👈
        }
      },
      //...
    ]
  }
]

演示 3

drilldown.activeDataLabelStyle.color也可以使用：

drilldown: {
  activeDataLabelStyle: {
    color: 'green' 👈
  },
}

演示 4