您如何使用用户输入作为 chart.js 中的数据值？

Question

我正在创建一个情绪跟踪器，允许人们输入他们感受到某种情绪的天数。 HTML 表单接受 0-7 的数字，因此我希望饼图动态移动以反映该值。当我尝试在数据数组中插入值时，整个图表反而消失了。我似乎无法弄清楚问题是什么，这是我的参考代码：

``div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
            <form>

                

<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [],
        datasets: [{
            label: '# of Votes',
            data: [angryValue.value, sadValue.value, happyValue.value, anxiousValue.value, tiredValue.value, motivatedValue.value],
            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: {
        }
    }
});

function updateChart(){
    angryValue = Number(document.getElementById('angry').value);
    sadValue = Number(document.getElementById('sad').value);
    happyValue = Number(document.getElementById('happy').value);
    anxiousValue = Number(document.getElementById('anxious').value);
    motivatedValue = Number(document.getElementById('motivated').value);
    tiredValue = Number(document.getElementById('tired').value);

    data.push({
        angry: angryValue,
        sad: sadValue,
        happy: happyValue,
        anxious: anxiousValue,
        motivated: motivatedValue,
        tired: tiredValue
    });

    chart.render();
}

var moodBtn = document.getElementById('mood-btn');
moodBtn.addEventListener('click', updateChart);


</script>
</div>``

Answer 1

在 updateChart() 函数中，没有名为 data 的变量。所以，看起来您正在将一些数据推送到未初始化的变量。

数据不是应该被推送到 chart.js 的配置中吗？您可能希望创建一个单独的变量来存储数据，以便您可以从其他函数中动态推送数据，只需将数据换出 chart.js.

Answer 2

<div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
            <form>

                <!---Happy--->
                <div class="mood">
                    <input type="string" name="happy" id="happy" placeholder="Happy" value="1" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Angry--->
                <div class="mood">
                    <input type="string" name="angry" id="angry" placeholder="Angry" value="3" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Sad--->
                <div class="mood">
                    <input type="string" name="sad" id="sad" placeholder="Sad" value="5" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Motivated--->
                <div class="mood">
                    <input type="string" name="motivated" id="motivated" placeholder="Motivated & Productive" value="6"required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Tired--->
                <div class="mood">
                    <input type="string" name="tired" id="tired" placeholder="Tired or Burnt out" value="0" required>
                    <button class="mood-btn" >Enter</button>
                </div>

                <!---Anxious--->
                <div class="mood">
                    <input type="string" name="anxious" id="anxious" placeholder="Anxious & Stressed" value="7" required>
                    <button class="mood-btn" >Enter</button>
                </div>
            </form>
        </div>



<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>
let chartData =[]
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'],
        datasets: [{
            label: '# of Votes',
            data: chartData,
            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: {
        }
    }
});

function removeData(chart) {
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

function addData(chart, data) {
    
    chart.data.datasets.forEach((dataset) => {
               
        dataset.data = [...data]
    });
    chart.update();
}

function updateChart(event){
    
    event.preventDefault()
    angryValue = Number(document.getElementById('angry').value);
    sadValue = Number(document.getElementById('sad').value);
    happyValue = Number(document.getElementById('happy').value);
    anxiousValue = Number(document.getElementById('anxious').value);
    motivatedValue = Number(document.getElementById('motivated').value);
    tiredValue = Number(document.getElementById('tired').value);
    
    chartData = [
        angryValue,
        sadValue,
        happyValue,
        anxiousValue,
        motivatedValue,
        tiredValue
]
    removeData(myChart)
    addData(myChart, chartData)
    
}

var moodBtn = document.querySelectorAll('.mood-btn');
moodBtn.forEach(btn => {
    btn.addEventListener('click', updateChart, false)
})
</script>
</div>

Answer 3

也许这就是您想要的？

const moods=['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'];
const ctx = document.getElementById('myChart');


const cont=document.querySelector(".form-container");
cont.innerHTML=moods.map((M,i)=>{
  let m=M.toLowerCase(); 
  return `<input type="text" name="${m}" placeholder="${M}" value="${i+2}"> ${M}`;
}).join("<br>");
const inps=[...document.querySelectorAll("input")];
cont.addEventListener("input",ev=>{
 myChart.data.datasets[0].data= inps.map(el=>+el.value);
 myChart.update()
});

const myChart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: moods,
    datasets: [{
      label: '# of Votes',
      data: inps.map(el=>+el.value),
      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: {}
  }
});

.form-container,.chart-container  {margin: 8px; display:inline-block;}
#myChart { width:200px; height:200px;}
.form-container input {width:30px}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="form-container"></div>
<div class="chart-container"><canvas id="myChart"></canvas></div>

我根据 moods 数组用一些生成的代码替换了您的一些冗长的 HTML 标记。我还跳过了按钮并通过监听包装所有输入元素的容器上的 input 事件触发了 update() 事件：

cont.addEventListener("input",ev=>{
 myChart.data.datasets[0].data= inps.map(el=>+el.value);
 myChart.update()
});

您如何使用用户输入作为 chart.js 中的数据值？

How do you use user input as data values in chart.js?

html

javascript

css

chart.js