javascript - Highcharts 颜色不显示

Question

我刚刚开始尝试使用 highcharts。我发现，在设置颜色属性时，它实际上并没有设置特定的十六进制颜色 - 相反，当您将鼠标悬停在图表上并突出显示时，它只会显示确切的十六进制颜色。 Highcharts 似乎会“自动调暗”颜色，因此当您将鼠标悬停在其上方时，它会突出显示并显示您在创建图表时列出的特定十六进制颜色。

有没有办法设置显示的实际颜色？如果能够指定最初应显示哪种十六进制颜色以及突出显示时显示哪种十六进制颜色，而不是自动调暗颜色并突出显示您指定的十六进制颜色，那就太好了:

$('#ageChart').highcharts({
        chart: {
          marginRight: 50,
          marginTop: 0,
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: '',
          style: {
            fontSize: 10
          }
        },
        tooltip: {
          pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        plotOptions: {
          pie: {
            size: 300,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false
            },
            showInLegend: true
          }
        },
        series: [{
          type: 'pie',
          name: 'Age Breakdown',
          data: [
            {
              name: "14-17",
              y: fourteenToSeventeen,
              color: "#E0DBBA"
            },
            {
              name: "18-24",
              y: eighteenToTwentyFour,
              color: "#8C8C8B"
            },
            {
              name: "25-34",
              y: twentyFiveToThirtyFour,
              color: "#BEE7E8"
            },
            {
              name: "35-44",
              y: thirtyFiveToFourtyFour,
              color: "#217C7E"
            },
            {
              name: "45-54",
              y: fourtyFiveToFiftyFour,
              color: "#687D68"
            },
            {
              name: "55+",
              y: fiftyFivePlus,
              color: "#634357"
            }
          ]
        }]
      })

Answer 1

颜色实际上显示正确。但在悬停状态下，颜色会被 Highcharts“提亮”。

可以通过将亮度系数指定为 0 来关闭此行为，如下所示:

$('#container').highcharts({
        ..
        ..

        series: [{
          type: 'pie',
          name: 'Age Breakdown',

            //add this section
            states: {
                hover: {
                    brightness: 0   
                }
            },

            data: [
            ..
            ..
            ]
        }]

   })