如何将用户输入的值添加到chart.js折线图中? [英] How can I add user inputted values to my chart.js line graph?

问题描述

我正在尝试向Chart.js折线图中添加新的X和y值，但始终出现错误.我尝试了许多不同的方式，但是似乎无法从用户输入中动态更新.这可能吗?我想念什么?

I'm trying to add a new X and y value to my Chart.js line graph but keep getting an error. I've tried so many different ways but can't seem to update dynamically from the user input . Is this possible? What am I missing?

我正在尝试在图表的末尾添加新的用户数据. X轴最终将是一个日期.

I'm trying to add the new user data at the end of the chart. The X axis will be a date eventually.

$('#update').click(function() {

  var xValue = $('#xValue').val;
  var yValue = $('#yValue').val;

  myChart.data.datasets[0].data.push(xValue, yValue);
  myChart.update();
});


var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Body Fat % Progress",
      data: [{
          x: 1,
          y: 1
        },
        {
          x: 2,
          y: 2
        },
        {
          x: 3,
          y: 5
        },
        {
          x: 4,
          y: 0
        },
        {
          x: 5,
          y: 2
        },


      ],
      backgroundColor: ['rgba(255, 255, 255, 0.2)'],
      borderColor: ['rgba(255, 255, 255, 1)'],
      borderWidth: 1
    }]
  },

  options: {
    legend: {
      labels: {
        // This more specific font property overrides the global property
        fontColor: 'white'
      }
    },

    scales: {

      xAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            quarter: 'MMM D'
          }
        },
        display: true,
        gridLines: {

          display: true,
          color: 'rgba(255, 255, 255, 0.1)',


        },
        scaleLabel: {
          display: true,
          labelString: 'Date',
          fontColor: 'white'
        },
        ticks: {
          beginAtZero: 'false',
          fontColor: 'white'
        }
      }],

      yAxes: [{
        display: true,
        color: 'white',
        gridLines: {
          display: true,
          color: 'rgba(255, 255, 255, 0.1)'
        },
        scaleLabel: {
          display: true,
          labelString: 'Body Fat %',
          fontColor: 'white'
        },
        ticks: {
          beginAtZero: true,
          fontColor: 'white'
        }
      }]

    },

    showAllTooltips: true,

    tooltips: {

      custom: function(tooltip) {
        if (!tooltip) return;

        // disable displaying the color box;
        tooltip.displayColors = false;
      },

      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.yLabel + '%';
        },
        title: function(tooltipItem, dat) {
          return 'Body Fat:';
        }

      }

    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>

<div class="chart-container">

  <canvas id="myChart" width="400" height="400"></canvas>

</div>

<input type="number" name="xValue" placeholder="X Value" id="xValue" />
<input type="number" name="yValue" placeholder="Y Value" id="YValue" />
<input type="submit" id="update" value="Update" />

推荐答案

我发现了一些东西:

1. 您在html代码中有错字.您有id="YValue"而不是id="yValue".

您放置了.val，它应该是.val().

xValue和yValue变量必须是数字，而不是字符串.

xValue and yValue vars have to be numbers, not strings.

将新数据添加到数据集中时，它必须是一个对象.

When you add the new data to the dataset, it has to be an object.

将所有内容放在一起...

Putting Everything together...

HTML :

<div class="chart-container">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

<input type="number" name="xValue" placeholder="X Value" id="xValue" />
<input type="number" name="yValue" placeholder="Y Value" id="yValue" />
<input type="submit" id="update" value="Update" />

JQUERY :

$('#update').click(function() {

    var xValue = parseFloat($('#xValue').val());
    var yValue = parseFloat($('#yValue').val());

    myChart.data.datasets[0].data.push({ x: xValue, y: yValue });
    myChart.update();
});

这里有个小提琴示例... https://fiddle.jshell.net/rigobauer /ztsafu8w/

Here you have a fiddle example... https://fiddle.jshell.net/rigobauer/ztsafu8w/

这篇关于如何将用户输入的值添加到chart.js折线图中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！