如何向Chart.js水平柱状图中动态传入任意长度的数组数据

完全可以实现数组数据的动态传入，不需要硬编码标签和数值，直接将预处理后的数组变量传入Chart.js的对应配置项即可，适配任意长度的输入数组。

核心修改点 #

1. 直接将arrayinput赋值给data.labels属性，Chart.js会自动根据数组长度渲染对应数量的Y轴标签
2. 直接将转换为数值类型的arraynumber赋值给datasets.data属性，自动对应每个标签的X轴数值
3. 如需动态生成匹配数组长度的柱子颜色，可通过预设颜色池循环取值或随机生成颜色实现

完整修改后代码 #

HTML部分（原有逻辑无需调整） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chartcontainer">
<canvas id="bar-chart-horizontal" ></canvas>
</div>

JavaScript部分 #

// 从本地存储获取的原始数组，长度可任意变化
let arrayinput = ["apple", "banana", "pineapple", "cherry","peach"] ;
let arraynumber = ["5", "10", "3", "8", "1"];

// 字符串数值转数字，简化为map写法，效果和原循环逻辑一致
const number = arraynumber.map(item => parseInt(item));
// 预设颜色池，可自定义
const colorPool = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
// 动态生成匹配数组长度的背景色数组，长度超过颜色池时自动循环取色
const backgroundColors = arrayinput.map((_, index) => colorPool[index % colorPool.length]);

new Chart(document.getElementById("bar-chart-horizontal"), {
    type: 'horizontalBar',
    data: {
      // 直接传入标签数组，无需硬编码每个元素
      labels: arrayinput,
      datasets: [
        {
          label: "Number of fruits",
          // 传入动态生成的背景色数组
          backgroundColor: backgroundColors,
          // 直接传入转换后的数值数组
          data: number
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Fruits'
      },
        scales: {
           xAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
        },
    }
});

补充说明 #

即使后续arrayinput和arraynumber的长度发生变化，上述代码无需调整即可自动适配，Chart.js会自动渲染对应数量的水平柱子。如果不需要固定颜色池，也可以替换为随机RGB颜色生成逻辑，适配任意长度的数组需求。

内容的提问来源于stack exchange，提问作者Jan P