个人中心
gpt4 book ai didi

javascript - 如何选择数组对象并将其传递给chart.js配置的数据设置？

转载 作者：行者123 更新时间：2023-12-02 18:15:39 24 4
gpt4 key购买 nike

我有一个隐藏的输入

<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和 Treat getElementById return value as array但这两个问题的答案都建议将对象转换为数组，我已经完成了，但它仍然不起作用。

Not able to pass array of data to chart.js in React是一个 react 问题，我尝试调整它，但它也不起作用。

我想要的输出可以在这里的代码片段中看到:

<!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();确认该对象是一个数组并且它具有正确的值。

尝试:

  1. 我尝试用 [] 包围该对象，如下所示 data: [obj],但随后什么也没有显示(可能是因为它已经是一个数组？)
  2. 我尝试按照此处的建议将数组转换为列表:Turn Array Into List With JavaScript但仍然没有显示任何内容。
  3. 我尝试将隐藏输入的值更改为 value="'10', '12'"但仍然没有显示任何内容。

最佳答案

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

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

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

trim 空白也很有帮助。

见下文。

<!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>

关于javascript - 如何选择数组对象并将其传递给chart.js配置的数据设置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71614256/

24 4 0
文章推荐： java - 我们可以说 O(n + m) 等价于 O(n)，当 m 是常数或当 n > m
文章推荐： haskell - 无法将预期类型与推断类型匹配，刚性类型变量错误
文章推荐： r - 在 R 中将多行粘贴在一起
文章推荐： javascript - 表单数据内容类型中未定义的 Node.js req.body
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com