具有自定义颜色的高图表不起作用

Question

我正在使用高图表和数据表。我正在尝试将自定义颜色添加到我的所有图表中，但自定义颜色并未被应用。我尝试了 highcharts 网站上提供的选项来在数组中添加颜色，但它不起作用。不知道我做错了什么。 这些是我想要应用的颜色。链接到我的代码。谢谢。 https://live.datatables.net/nikusucu/1/edit

['#003489'、'#ED7D31'、'#A5A5A5'、'#FFC000'、'#5B9BD5'、'#058DC7'、'#50B432'、'#ED561B'、'#DDDF00'、'#24CBE5 ', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']; ['#003489'、'#ED7D31'、'#A5A5A5'、'#FFC000'、'#5B9BD5'、'#058DC7'、'#50B432'、'#ED561B'、'#DDDF00'、'#24CBE5' , '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];

function initializeChart(chartId, tableId, chartTitle) {
    // Create DataTable
    const table = new DataTable(tableId, {
        searching: false,
        info: false,
        paging: false,
        sort: false
    });

    // Create chart
    const chart = Highcharts.chart(chartId, {
        chart: {
            type: 'pie',
            styledMode: true
        },
        title: {
            text: chartTitle
        },
        tooltip: {
            pointFormat: '</b> {point.y:.1f}%'
        },
        series: [
            {
                data: chartData(table)
            }
             
        ],
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                series: {
            animation: {
                duration: 2000
            }
        },
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                },
                showInLegend: true  // Show legends
            }
        }
    });

    // On each draw, update the data in the chart
    table.on('draw', function () {
        chart.series[0].setData(chartData(table));
    });

    function chartData(table) {
        var data = [];
        table.rows().every(function () {
            var row = this.data();
            data.push({
                name: row[0],  // Assuming the first column is the name
                y: parseFloat(row[1])  // Assuming the second column is the numeric value
            });
        });

        return data;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    // Check if Highcharts is defined before calling the function
    if (typeof Highcharts !== 'undefined') {
        initializeChart('demo-output', '#example', 'test1');
        initializeChart('demo-output2', '#example1', 'test 2');

        var allSeriesData = [];
        var categories = [];
        $('#example2').data('scrollX-custom', true);

        var table = $("#example2").DataTable({
            searching: false,
            lengthChange: false,
            ordering: false,
            info: false,
            paging: false,
            initComplete: function (settings, json) {
                let api = new $.fn.dataTable.Api(settings);

                // get the x-axis caregories from the table headings:
                var headers = api.columns().header().toArray();
                headers.forEach(function (heading, index) {
                    if (index > 0 && index < headers.length - 1) {
                        categories.push($(heading).html());
                    }
                });

                // get the seris data as an array of numbers from the table row data:
                let rows = api.rows().data().toArray();
                rows.forEach(function (row) {
                    group = {
                        name: '',
                        data: []
                    };
                    row.forEach(function (cell, idx) {
                        if (idx == 0) {
                            group.name = cell;
                        } else if (idx < row.length - 1) {
                            group.data.push(parseFloat(cell.replace(/,/g, '')));
                        }
                    });
                    allSeriesData.push(group);
                });
            }
        });

        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });

        var myChart = Highcharts.chart("chart-A", {
            chart: {
                type: "column",
                borderColor: 'black',
                borderWidth: 1,
                marginTop: 50
            },
            legend: {
                symbolRadius: 0,
                itemStyle: {
                    color: '#000000',
                    fontSize: '16px'
                }
            },
            
            credits: {
                enabled: false
            },
            title: {
                text: "Test3"
            },
            xAxis: {
                categories: categories,
                labels: {
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            yAxis: {
                title: false,
                tickInterval: 10,
                max: 70,
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 0);
                    },
                    style: {
                        fontWeight: '600',
                        fontSize: '16px',
                        color: '#000000'
                    }
                }
            },
            series: allSeriesData
        });

        // Button click event listeners
        $('.usa-button').on('click', function () {
            var buttonText = $(this).text().trim();

            // Toggle chart visibility based on button click
            if (buttonText === '2022') {
                $('#chart1').hide();
                $('#chart2').show();
                $('#chart3').hide();
            } else if (buttonText === 'Bar Graph') {
                $('#chart1').hide();
                $('#chart2').hide();
                $('#chart3').show();
            } else {
                // Default case, show chart1
                $('#chart1').show();
                $('#chart2').hide();
                $('#chart3').hide();
            }

            // Highlight the active button
            $('.usa-button').removeClass('active');
            $(this).addClass('active');
        });

        // Set default highlight on 2023 button
        $('.usa-button:contains("2023")').addClass('active');
    }
});

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/dataTables.js"></script>

 <script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://code.highcharts.com/css/highcharts.css" rel="stylesheet" type="text/css" />



<div class="ar-controls grid-row tablet:flex-justify-start">
<div class="tablet:grid-col-auto margin-bottom-205" ddiv="ddiv"><button class="usa-button usa-button--outline">2023</button><button class="usa-button usa-button--outline">2022</button><button class="usa-button usa-button--outline">Bar Graph</button></div>
</div>

<div id="chart1">
<div id="demo-output" class="chart-display" style=" margin-bottom: 2em; height: 650px; border: solid 1px lightgray;"></div>

<table id="example" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">test 1</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td scope="row">1</td>
<td>3.2%</td>
</tr>

<tr>
<td scope="row">2</td>
<td>1.1%</td>
</tr>

<tr>
<td scope="row">3</td>
<td>1.6%</td>
</tr>

<tr>
<td scope="row">4</td>
<td>1.9%</td>
</tr>

<tr>
<td scope="row">5</td>
<td>2.5%</td>
</tr>

<tr>
<td scope="row">6</td>
<td>4.4%</td>
</tr>

<tr>
<td scope="row">7</td>
<td>18.6%</td>
</tr>

<tr>
<td scope="row">8</td>
<td>1.1%</td>
</tr>

<tr>
<td scope="row">9</td>
<td>1.4%</td>
</tr>

<tr>
<td scope="row">10</td>
<td>1.9%</td>
</tr>

<tr>
<td scope="row">11</td>
<td>2.2%</td>
</tr>

<tr>
<td scope="row">12</td>
<td>3.4%</td>
</tr>

<tr>
<td scope="row">13</td>
<td>5.0%</td>
</tr>

<tr>
<td scope="row">14</td>
<td>51.9%</td>
</tr>
</table>
</div>

<div id="chart2" style=" display: none;">
<div id="demo-output2" class="chart-display2" style=" margin-bottom: 2em; height: 600px; border: solid 1px lightgray;"></div>

<table id="example1" class="display" style=" width: 100%;"><thead>
<tr>
<th scope="col">1</th>
<th scope="col">Percent</th>
</tr>

</thead>
<tr>
<td scope="row">2</td>
<td>18.6</td>
</tr>

<tr>
<td scope="row">3</td>
<td>0</td>
</tr>

<tr>
<td scope="row">4</td>
<td>0</td>
</tr>

<tr>
<td scope="row">5</td>
<td>5.0</td>
</tr>

<tr>
<td scope="row">6</td>
<td>2.2</td>
</tr>

<tr>
<td scope="row">7</td>
<td>0</td>
</tr>

<tr>
<td scope="row">8</td>
<td>2.5</td>
</tr>

<tr>
<td scope="row">9</td>
<td>3.4</td>
</tr>

<tr>
<td scope="row">10</td>
<td>4.4</td>
</tr>

<tr>
<td scope="row">11</td>
<td>0</td>
</tr>

<tr>
<td scope="row">12</td>
<td>0</td>
</tr>

<tr>
<td scope="row">13</td>
<td>12.2</td>
</tr>
</table>
</div>

<div id="chart3" style=" display: none;"><!--<div style=" text-align: center;"><img src="/images/complaint-data-chart-1.svg" alt="Cases Received From Consumers" title="Cases Received From Consumers" style=" width: 700px;" /></div> -->
<div id="chart-A" style=" width: 100%; height: 400px;"></div>

<table class="row-border stripe dt-right dataTable no-footer dtr-inline" id="example2" style=" width: 100%;"><thead>
<tr>
<th scope="col" style=" text-align: center; width: 12%;">Year</th>
<th scope="col" style=" text-align: center; width: 22%;">1</th>
<th scope="col" style=" text-align: center; width: 22%;">2</th>
<th scope="col" style=" text-align: center; width: 22%;">3</th>
<th scope="col" style=" text-align: center; width: 22%;">4</th>
<th scope="col" style=" text-align: center; width: 22%;">5</th>
<th scope="col" style=" text-align: center; width: 22%;">6</th>
</tr>

</thead>
<tr>
<td scope="row" style=" text-align: center;">2019</td>
<td style=" text-align: center;">42.5%</td>
<td style=" text-align: center;">30.1%</td>
<td style=" text-align: center;">12.5%</td>
<td style=" text-align: center;">6%</td>
<td style=" text-align: center;">11.3%</td>
<td style=" text-align: center;">10%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2020</td>
<td style=" text-align: center;">50.01%</td>
<td style=" text-align: center;">26.5%</td>
<td style=" text-align: center;">15%</td>
<td style=" text-align: center;">12%</td>
<td style=" text-align: center;">11%</td>
<td style=" text-align: center;">10%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2021</td>
<td style=" text-align: center;">29.5%</td>
<td style=" text-align: center;">35%</td>
<td style=" text-align: center;">66%</td>
<td style=" text-align: center;">7%</td>
<td style=" text-align: center;">6%</td>
<td style=" text-align: center;">56%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2022</td>
<td style=" text-align: center;">40.1%</td>
<td style=" text-align: center;">76%</td>
<td style=" text-align: center;">7%</td>
<td style=" text-align: center;">8%</td>
<td style=" text-align: center;">86%</td>
<td style=" text-align: center;">54%</td>
</tr>

<tr>
<td scope="row" style=" text-align: center;">2023</td>
<td style=" text-align: center;">38.9%</td>
<td style=" text-align: center;">55%</td>
<td style=" text-align: center;">5%</td>
<td style=" text-align: center;">45%</td>
<td style=" text-align: center;">55%</td>
<td style=" text-align: center;">55%</td>
</tr>
</table>
</div>

Answer 1

要将自定义颜色应用于 Highcharts，您需要为颜色属性定义一个数组。

Highcharts.chart('container', {
 colors: ['#003489', '#ED7D31', '#A5A5A5', '#FFC000', '#5B9BD5'],
 series: [...]
});

API参考： https://api.highcharts.com/highcharts/colors

演示： https://jsfiddle.net/BlackLabel/dg2fuwoc/

在您的演示中，无需使用 styledMode 来应用自定义颜色，只需定义一个颜色数组即可正常工作。