圖表 js 數據標簽樣式

Question

所以我在條形圖上使用 Chartjs 的數據標簽插件。 每個標簽都有每月和 7 天前的數據。 我希望數據標簽在 7 天前為每月黑色的紅色。 選項中的顏色功能將 2 個條組合在一起，並以塊的形式顯示 2 紅色 2 黑色 2 紅色 2 黑色，與單獨顯示相同。

這是輸出圖表的鏈接。 https://imgur.com/fqPesYz

import Chart from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";

require("../../Row4/Row4Charts/RoundedBars.js");

export default class Cancellations7daysChart extends Component {
    Cancellations7daysChart = React.createRef();

    componentDidMount() {
        const Cancellations7daysChart = this.Cancellations7daysChart.current.getContext(
            "2d"
        );

        new Chart(Cancellations7daysChart, {
            type: "bar",
            data: {
                labels: ["DSL", "FTTC", "FTTP", "GFast"],
                datasets: [
                    {
                        label: "Monthly",
                        data: [7, 19, 2, 0],
                        backgroundColor: [
                            "rgba(255, 9, 49)",
                            "rgba(255, 9, 49)",
                            "rgba(255, 9, 49)",
                            "rgba(255, 9, 49)"
                        ],
                        borderColor: [
                            "rgba(0, 193, 189)",
                            "rgba(255, 9, 49)",
                            "rgba(0, 193, 189)",
                            "rgba(0, 193, 189)"
                        ],
                        borderWidth: 1,
                        pointRadius: 4,
                    },

                    {
                        label: "7 days prior",
                        data: [2, 11, 5, 3],
                        backgroundColor: [
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)"
                        ],
                        borderColor: [
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)",
                            "rgba(208, 210, 211)"
                        ],
                        borderWidth: 1,
                        pointRadius: 6,
                    }

                ]
            },
            options: {
                maintainAspectRatio: true,
                cornerRadius: 6,
                cutoutPercentage: 65,
                angleLines: {
                    display: true
                },
                tooltips: {
                    enabled: true
                },
                label: {
                    usePointStyle: true
                },
                legend: {
                    position: "bottom",
                    labels: {
                        filter: function (legendItem, Cancellations7daysChart) {
                            return !legendItem.text.includes("Monthly");
                        }
                    }
                },
                scales: {
                    ticks: {
                        maxTickLimit: 1,
                        max: 15,
                        display: false
                    },

                    //yaxes change
                    yAxes: [
                        {
                            gridLines: {
                                drawBorder: false,
                                display: false
                            },
                            ticks: {
                                beginAtZero: true,
                                display: false
                            }
                        }
                    ],
                    //xaxes change
                    xAxes: [
                        {
                            ticks: {
                                //Change font here
                            },
                            gridLines: {
                                drawBorder: false,
                                display: false,
                                scaleShowLabels: false
                            }
                        }
                    ]
                },
                plugins: {
                    datalabels: {
                        color: ["red", "black", "red", "black", "red", "black", "red", "black"],
                        align: "end",
                        anchor: "end"
                    }
                }
            }
        });
    }


    render() {
        return (
            <div>
                <canvas
                    id="Cancellations7daysChart"
                    ref={this.Cancellations7daysChart}
                    width={360}
                    height={360}
                />
            </div>
        );
    }
}

Answer 1

您需要創建一個函數來根據標簽更改顏色：

plugins: {
    datalabels: {
        anchor: 'end',
        align: 'end',
        color: function(context) {
            var index = context.dataIndex;
            var value = context.dataset.data[index];
            var valueRed = context.dataset.label;

            if(valueRed === 'Monthly') {
                return value = 'red';
            } else {
                return value = '#000';
            }
        }
    }
}

這是一個工作示例： Plunker example

有關插件頁面格式的更多信息： Scriptable Options