如何使用 Chart.js 将我的对象数组传递到图形中

Question

你好，我正在尝试用 Chart.js 在图表中展示我的对象数组，这是代码

let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var detection = new Chart(c, {
    type: 'bar',
    data: {
        labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
        datasets: [{
            fill: false,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', // neutral
                'rgba(54, 162, 235, 0.2)', // happy
                'rgba(255, 206, 86, 0.2)', // sad
                'rgba(75, 192, 192, 0.2)', // angry
                'rgba(153, 102, 255, 0.2)', // surprised
                'rgba(255, 159, 64, 0.2)'   // disgust
            ],
            borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'                        
            ],
            borderWidth: 2,
            data: timers,
        }]
    },
    options: {
        indexAxis: 'x',
        responsive: true,
        plugins: {
            legend: {
                display: false,
                labels: {
                    font: {
                        size: 50
                    }
                }
            },
            title: {
                display: true,
                text: "Emotion timers"
            }
        }
    }
});

问题是该图没有将我提供给它的标签作为标签，而是将对象数组中的名称作为标签，因此我无法将 x 标签的大小调整得更大。预先感谢您提供任何提示。

Answer 1

您只需要像这样让标签数组脱离图表即可：

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const timers = {
  neutral: 10,
  happy: 0,
  sad: 0,
  angry: 0,
  surprised: 0,
  disgust: 20
};


const detection = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)', // neutral
        'rgba(54, 162, 235, 0.2)', // happy
        'rgba(255, 206, 86, 0.2)', // sad
        'rgba(75, 192, 192, 0.2)', // angry
        'rgba(153, 102, 255, 0.2)', // surprised
        'rgba(255, 159, 64, 0.2)' // disgust
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2,
      data: timers,
    }]
  },
  options: {
    indexAxis: 'x',
    responsive: true,
    plugins: {
      legend: {
        display: false,
        labels: {
          font: {
            size: 50
          }
        }
      },
      title: {
        display: true,
        text: "Emotion timers"
      }
    }
  }
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Answer 2

根据图表 js 文档，当您将地图（键，值）提供给像 timers 这样的数据字段时，图表 js 会自动将键作为标签，将值作为要绘制的数据点.

因此，尽管如此，如果您想提供自己的标签，您可以将以下代码片段添加到现有代码中。

var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });

并传递 values 而不是 timers。

完整代码-

let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });

var detection = new Chart(c, {
    type: 'bar',
    data: {
        labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
        datasets: [{
            fill: false,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', // neutral
                'rgba(54, 162, 235, 0.2)', // happy
                'rgba(255, 206, 86, 0.2)', // sad
                'rgba(75, 192, 192, 0.2)', // angry
                'rgba(153, 102, 255, 0.2)', // surprised
                'rgba(255, 159, 64, 0.2)'   // disgust
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'                        
            ],
            borderWidth: 2,
            data: values,
        }]
    },
    options: {
        indexAxis: 'x',
        responsive: true,
        plugins: {
            legend: {
                display: false,
                labels: {
                    font: {
                        size: 50
                    }
                }
            },
            title: {
                display: true,
                text: "Emotion timers"
            }
        }
    }
});

更新：当您希望在 setInterval 中更新计时器时更新图表，您必须将图表创建代码也放在 setInterval 函数中。比如你可以参考下面完整的html文件

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
    var i = 0;
    
    setInterval(updateChart,3000);
    function updateChart(){
        var c = document.getElementById("myChart");
        let chartStatus = Chart.getChart("myChart"); // <canvas> id
        if (chartStatus != undefined) {
          chartStatus.destroy();
        }
        i = i+1;
        let timers;
        if(i%2==0){
            timers = {neutral: 20, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
        }
        else{
            timers = {neutral: 0, happy: 20, sad: 0, angry: 0, surprised: 0, disgust: 0};
        }
        var keys = Object.keys(timers);
        var values = keys.map(function(v) { return timers[v]; });
        var detection = new Chart(c, {
            type: 'bar',
            data: {
                labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
                datasets: [{
                    fill: false,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)', // neutral
                        'rgba(54, 162, 235, 0.2)', // happy
                        'rgba(255, 206, 86, 0.2)', // sad
                        'rgba(75, 192, 192, 0.2)', // angry
                        'rgba(153, 102, 255, 0.2)', // surprised
                        'rgba(255, 159, 64, 0.2)'   // disgust
                    ],
                    borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'                        
                    ],
                    borderWidth: 2,
                    data: keys.map(function(v) { return timers[v]; }),
                }]
            },
            options: {
                indexAxis: 'x',
                responsive: true,
                plugins: {
                    legend: {
                        display: false,
                        labels: {
                            font: {
                                size: 50
                            }
                        }
                    },
                    title: {
                        display: true,
                        text: "Emotion timers"
                    }
                }
            }
        });

    }
</script>
</head>
<button onclick="updateChart()">Update Chart</button>
<canvas id="myChart" width="100" height="100"></canvas>

您可以运行此html代码以便更好地理解。

如何使用 Chart.js 将我的对象数组传递到图形中

How to pass my array of objects into a graph with Chart.js

javascript

arrays

graph

chart.js