时间戳

首页 > 解决方案 > 使用 Chart.js 在圆环图上显示标签

javascript - 使用 Chart.js 在圆环图上显示标签

问题描述

我现在真的被困住了。

使用 Chart.js v3.2.1 显示一些图表，效果很好。

然后，当我尝试使用 chartjs-plugin-datalabels 插件在甜甜圈图表上显示标签时，该图表不再显示。

我看不出我做错了什么。我需要帮助！

注意：在 Google 和 Stackoverflow 上有很多类似的问题，但大多数都是关于以前的版本，但我的工作只批准我使用 Chart.JS 的最新版本。

//DOUGHNUT GRAPH
   var doughnutChartData = {
  labels: [
    'Dr @ Fault',
    'TP @ Fault',
    'Wthr Evt',
    'Other'
  ],
  datasets: [
    {
      label: "slices",
      borderWidth: 3,
      data: [2,3,2,1],
      backgroundColor: [
      '#D6001C',
      '#00A3E0',
      '#52A886',
      '#2E3138'
    ],
        borderColor: [
      '#fff',
      '#fff',
      '#fff',
      '#fff'
    ]
    }
  ]
};

    //DOUGHNUT CHART OPTIONS
    var doughnutChartOptions = {
        responsive: true,
        plugins: {
            datalabels: {
                        formatter: function (value, context) {
                            return context.chart.data.labels[
                                context.dataIndex
                            ];
                        },
                    },
            title: {
                display: true,
                text: "Reported Fault Allocation",
                color: "#D6001C",
                    font: {
                        family: "AvenirNextLTW01-Regular",
                        size: 16,
                        style: 'normal'
                    }
            },
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                grid: {
                    display: false,
                    drawBorder: true
                }
            },
            y: {
                grid: {
                    display: true,
                    drawBorder: true,
                },
            },
        },
        elements: {
            point: {
                radius: 0
            }
        },
    }
    //DISPLAY DOUGHNUT GRAPH

    var ctx = document.getElementById("canvas3-detailed").getContext("2d");
    window.myDoughnut = new Chart(ctx, {
        plugins: [ChartDataLabels],
        type: "doughnut",
        data: doughnutChartData,
        options: doughnutChartOptions
    });
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<canvas id="canvas3-detailed"></canvas>

标签： javascripthtmljquerygraphchart.js

解决方案

我发现我使用的插件版本不正确。我现在已经更新，它正在显示标签！

 //DOUGHNUT GRAPH
    var doughnutChartData = {
        labels: [
            'Dr @ Fault',
            'TP @ Fault',
            'Wthr Evt',
            'Other'
        ],
        datasets: [{
            label: "slices",
            borderWidth: 3,
            data: [2, 3, 2, 1],
            backgroundColor: [
                '#D6001C',
                '#00A3E0',
                '#52A886',
                '#2E3138'
            ],
            borderColor: [
                '#fff',
                '#fff',
                '#fff',
                '#fff'
            ]
        }]
    };

    //DOUGHNUT CHART OPTIONS
    var doughnutChartOptions = {
        responsive: true,
        plugins: {
            datalabels: {
                color: 'white',
                formatter: function (value, context) {
                    return context.chart.data.labels[
                        context.dataIndex
                    ];
                },
            },
            title: {
                display: true,
                text: "Reported Fault Allocation",
                color: "#D6001C",
                font: {
                    family: "AvenirNextLTW01-Regular",
                    size: 16,
                    style: 'normal'
                }
            },
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                grid: {
                    display: false,
                    drawBorder: true
                }
            },
            y: {
                grid: {
                    display: true,
                    drawBorder: true,
                },
            },
        },
        elements: {
            point: {
                radius: 0
            }
        },
    }
    
    //DISPLAY DOUGHNUT GRAPH

    var ctx = document.getElementById("canvas3-detailed").getContext("2d");
    window.myDoughnut = new Chart(ctx, {
        plugins: [ChartDataLabels],
        type: "doughnut",
        data: doughnutChartData,
        options: doughnutChartOptions
    });
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id="canvas3-detailed"></canvas>

推荐阅读