Question

我正在尝试使用用户在表单中填充的值更改chart.js折线图中的值。下图:(忽略当前占位符数据和值点）。 Framework for graph

我对JS很新。我想知道如何从用户的表单输入中获取数据，仅使用JS，没有第三方数据库/程序等。

另一件事是，我在HubSpot中构建它，所以我的JS代码和HTML都必须在一个自定义HTML框中。

这是我的代码： 非常感谢您的帮助！

<canvas id="myChart" width="350px" height="100px"></canvas>

<script>
var ctx = document.getElementById("myChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December",],
        datasets: [{
            label: 'My Sales This Year',
            data: [10000, 15000, 4000, 11000, 15500, 10000, 8000, 10384],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            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: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

window.onload=function(){
    zingchart.render({
        id:"myChart",
        output:"svg",
        height:400,
        width:"100%",
        data:dataObj
    });
};
</script>

<form>
  Month:<br>
  <input type="text" name="Month"><br>
  Funnel Value:<br>
  <input type="number" name="Value">
  <input type="submit" value="Submit">
</form>

使用表单中的用户值更改数据值 - Chart.js

0 个答案: