代码之家 › 专栏 › 技术社区 › HelloWorld1

在栏中显示数值数据

chart.js

1

HelloWorld1 · 技术社区 · 1 年前

目标:
使用每个框中带有数字的可视化数据显示图表。

问题:
在这个图表中可以做到吗?

https://www.geeksforgeeks.org/how-to-dynamically-update-values-of-a-chart-in-chartjs/

https://www.chartjs.org/docs/latest/developers/updates.html

来自“Chart.Data.dates”的数据不存在。

其他:
https://jsbin.com/rutexugole/edit?html,output

<!DOCTYPE html>
<html>

<head>
    <title>ChartJS Stacked Bar Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3>Chart JS Stacked Chart </h3>
    
    <div>
        <canvas id="stackedChartID"></canvas>
    </div>

    <script>

        // Get the drawing context on the canvas
        var ctx = document.getElementById("stackedChartID").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["bike", "car", "scooter", "truck", "auto", "Bus"],
                datasets: [{
                    label: 'worst',
                    backgroundColor: "blue",
                    data: [17, 16, 4, 11, 8, 9],
                }, {
                    label: 'Okay',
                    backgroundColor: "green",
                    data: [14, 2, 10, 6, 12, 16],
                }, {
                    label: 'bad',
                    backgroundColor: "red",
                    data: [2, 21, 13, 3, 24, 7],
                }],
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Stacked Bar chart for pollution status'
                    },
                },
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    </script>
</body>

</html>

1 回复 | 直到 1 年前

1

0

Hans Felix Ramos 1 年前

注册你的插件 chartjs-plugin-datalabels : https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration

<!DOCTYPE html>
<html>

<head>
    <title>ChartJS Stacked Bar Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
    <h3>Chart JS Stacked Chart </h3>
    
    <div>
        <canvas id="stackedChartID"></canvas>
    </div>

    <script>

        // Get the drawing context on the canvas
        var ctx = document.getElementById("stackedChartID").getContext('2d');
        var myChart = new Chart(ctx, {
            plugins: [ChartDataLabels],
            type: 'bar',
            data: {
                labels: ["bike", "car", "scooter", "truck", "auto", "Bus"],
                datasets: [{
                    label: 'worst',
                    backgroundColor: "blue",
                    data: [17, 16, 4, 11, 8, 9],
                    datalabels: {
                      align: "end",
                      anchor: "start",
                      font:{
                        size: "10px",
                      },
                      padding: "0px",
                      color: "#000",
                    },
                }, {
                    label: 'Okay',
                    backgroundColor: "green",
                    data: [14, 2, 10, 6, 12, 16],
                    datalabels: {
                      align: "center",
                      anchor: "center",
                      font:{
                        size: "10px",
                      },
                      padding: "0px",
                      color: "#000",
                    },
                }, {
                    label: 'bad',
                    backgroundColor: "red",
                    data: [2, 21, 13, 3, 24, 7],
                    datalabels: {
                      labels: {
                        index: {
                          align: "start",
                          anchor: "end",
                          font:{
                            size: "10px",
                          },
                          padding: "0px",
                          color: "#000",
                        },
                        sum: {
                          align: "end",
                          anchor: "end",
                          font:{
                            size: "14px",
                          },
                          padding: "0px",
                          color: "#000",
                          formatter: function(value, ctx) {
                                const worst = ctx.chart.data.datasets[0].data[ctx.dataIndex]
                                const bad = ctx.chart.data.datasets[1].data[ctx.dataIndex] 
                                const okay = ctx.chart.data.datasets[2].data[ctx.dataIndex] 
                                
                            return worst + bad +okay
                          }
                        }
                      }
                    }
                }],
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Stacked Bar chart for pollution status'
                    },
                },
                scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                }
            }
        });
    </script>
</body>

</html>