图表js标签字体颜色不变

Question

我的网络应用程序中有一个饼图，图表上方有一些标签，旁边有名称。由于颜色，文本很难阅读。()我真的很想更改文本颜色，但由于某种原因我不能。

我尝试过：

1. 关闭 chrome 上的扩展。
2. 更换浏览器。
3. 使用额外的CSS样式（向下）
4. 检查了 css 的全局样式，我只有这些（也向下）

我需要在今天结束之前解决这个问题，我非常感谢您的帮助。 谢谢！

我的期望只是能够改变字体颜色，仅此而已

代码：

    <script>
        var ctx = document.getElementById('expenseChart').getContext('2d');
        
        var data = {
            labels: [
                {% for expense in expenses_by_type %}
                    "{{ expense.place_type }}"{% if not forloop.last %}, {% endif %}
                {% endfor %}
            ],
            datasets: [{
                data: [
                    {% for expense in expenses_by_type %}
                        {{ expense.total_amount }}{% if not forloop.last %}, {% endif %}
                    {% endfor %}
                ],
                backgroundColor: [
                    'rgb(241,169,12)',
                    'rgb(233,116,24)',
                    'rgb(236,138,20)',
                    'rgb(227,71,36)',
                    'rgb(228,95,28)',
                    'rgb(220,49,43)',
                    'rgb(236,153,12)',
                    'rgb(243,185,4)',
                    'rgb(228,84,28)',
                ],
            }]
        };

        var options = {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: true,
                labels: {
                    fontColor: 'white',
                },
            },
        };



        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: options,
        });
    </script>

    <style>
        #expenseChart .chartjs-render-monitor .chartjs-legend {
            color: white !important;
        }
    </style>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bricolage Grotesque', sans-serif;
}

Answer 1

您在错误的位置定义了图例选项。它应该在plugins命名空间中，而且

fontColor

不再存在，你需要定义

font.color

options: {
  plugins: {
    legend: {
      labels: {
        font: {
          color: 'red'
        }
      }
    }
  }
}