如何 select 并将数组对象传递给 chart.js 配置的数据设置？

Question

我有一个隐藏输入

<input type="hidden" id="0" value="10, 12">

我正在使用

obj = [document.getElementById('0').value];

在脚本标签中检索隐藏输入的值并将其用作 Chart.js

设置中的数据数组

const data = {
   labels: labels,
   datasets: [
      {
          backgroundColor: 'rgb(0, 255, 0)',
          data: obj,
          barThickness: 50
      }]
};

我已经阅读了 Chart.js unable to display data and Treat getElementById return value as array 但是这两个问题的答案都建议将对象转换为我已经完成的数组，但它仍然不起作用。

是一个反应问题，我尝试调整它，但它也没有用。

我想要的输出可以在此处的代码片段中看到：

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
    <canvas height="100px" id="myChart"></canvas>
    <input type="hidden" id="0" value="10, 12">
    <script>
        obj = [document.getElementById('0').value];
        console.log(Array.isArray(obj), obj);
        const labels = ['Type 1', 'Type 2'];
        const data = {
            labels: labels,
            datasets: [
                {
                    backgroundColor: 'rgb(0, 255, 0)',
                    data: [10,12],
                    barThickness: 50
                }]
        };
        const config = {
            type: 'bar',
            data: data
        };
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>

如何通过某种方式选择隐藏的输入并将该数组作为数据传递来实现相同的解决方案？

我已经使用 console.log(); 确认该对象是一个数组并且它具有正确的值。

尝试次数：

我试过像这样用 [] 围绕对象 data: [obj], 但是没有显示任何内容（可能是因为它已经是一个数组？）
我已尝试按照此处的建议将数组转换为列表：但仍然没有显示任何内容。
我已经尝试将隐藏输入的值更改为 value="'10', '12'" 但仍然没有任何显示。

Answer 1

行 obj = [document.getElementById('0').value]; 将生成一个数组，其值是字符串“10, 12”。要将字符串转换为数组，请尝试拆分方法：obj = document.getElementById('0').value.split(",");.

现在您有一个包含字符串值“10”和“12”的数组。不确定 chat.js 是否可以处理这个问题，如果不能，您可以使用 map 函数遍历 vales 并将其转换为 numbers

Answer 2

你隐藏输入的值是一个字符串。

您正在创建一个包含该字符串的单个元素的数组。

您需要先拆分字符串，以 , 字符分隔。

修剪空格也很有帮助。

见下文。

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
    <canvas height="100px" id="myChart"></canvas>
    <input type="hidden" id="0" value="10, 12">
    <script>
        obj = document.getElementById('0').value.replace(" ", "").split(',')
        console.log(obj);
        const labels = ['Type 1', 'Type 2'];
        const data = {
            labels: labels,
            datasets: [
                {
                    backgroundColor: 'rgb(0, 255, 0)',
                    data: obj,
                    barThickness: 50
                }]
        };
        const config = {
            type: 'bar',
            data: data
        };
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>

如何 select 并将数组对象传递给 chart.js 配置的数据设置？

How to select and pass array object to data setting of chart.js config?

javascript

html

arrays

chart.js