时间戳

首页 > 解决方案 > 我如何使用我从表单中输入的数字作为chartjs的输入数据

javascript - 我如何使用我从表单中输入的数字作为chartjs的输入数据

问题描述

我正在尝试使用我的输入数据作为我正在使用 chartjs 的图表的数据，请帮助我尝试拆分和加入数字，但没有显示我正在使用烧瓶作为我的后端

var Diadata = []
 function getdata() {
      Diadata[0] = document.getElementById('Carat').value;
      Diadata[1] = document.getElementById("Cut").value;
      Diadata[2] = document.getElementById("Color").value;
      Diadata[3] = document.getElementById("Clarity").value;
      Diadata[4] = document.getElementById("Depth").value;
      Diadata[5] = document.getElementById("Table").value;
      Diadata[6] = document.getElementById("X").value;
      Diadata[7] = document.getElementById("Y").value;
      Diadata[8] = document.getElementById("Z").value;
     console.log("TEST: ",[Diadata.join(" ").replace(/ /g,",")])
 }



var ctxL = document.getElementById("barChartHorizontal").getContext('2d');
var myLineChart = new Chart(ctxL, {
  type: 'horizontalBar',
  data: {
    labels: ["Carat", "Cut", "Color", "Clarity", "Depth", "Table", "X", "Y", "Z"],
    datasets: [
      {
        label: "Price",
        data: [Diadata.join(" ").replace(/ /g,",")], //i want to add my input data here
        backgroundColor: 'orange',
        borderWidth: 0,
      }
    ]
  },

标签： javascripthtmlchart.js

解决方案

数据数组需要一个带有值的数组，因此如果您删除连接，它应该可以工作。

你会得到这个：

var Diadata = []
 function getdata() {
      Diadata[0] = document.getElementById('Carat').value;
      Diadata[1] = document.getElementById("Cut").value;
      Diadata[2] = document.getElementById("Color").value;
      Diadata[3] = document.getElementById("Clarity").value;
      Diadata[4] = document.getElementById("Depth").value;
      Diadata[5] = document.getElementById("Table").value;
      Diadata[6] = document.getElementById("X").value;
      Diadata[7] = document.getElementById("Y").value;
      Diadata[8] = document.getElementById("Z").value;
 }


getdata();
var ctxL = document.getElementById("barChartHorizontal").getContext('2d');
var myLineChart = new Chart(ctxL, {
  type: 'horizontalBar',
  data: {
    labels: ["Carat", "Cut", "Color", "Clarity", "Depth", "Table", "X", "Y", "Z"],
    datasets: [
      {
        label: "Price",
        data: Diadata, //i want to add my input data here
        backgroundColor: 'orange',
        borderWidth: 0,
      }
    ]
  },

推荐阅读