Question

我有一张chart.js的折线图。我想删除最后一个点，但方法removeData（）没有折线图的参数，而对于极坐标图，它确实支持removeData（atIndex）。因此，对于折线图，removeData（）仅默认删除第一个点。

如何在不必先删除所有数据的情况下仅删除最后一个点？

Answer 1

您可以查看removeData的源代码来制作自己的代码 - 只需使用pop代替shift

myChart.removeLastPoint = function() {
  this.scale.xLabels.pop();
  this.scale.valuesCount--;
  this.scale.fit();

  Chart.helpers.each(this.datasets,function(dataset){
    dataset.points.pop();
  },myChart);

  this.update();   
}

其中myChart是您的图表对象。

小提琴 - http://jsfiddle.net/38gxavst/

Answer 2

很抱歉，如果这不起作用，第一次使用JSFiddle但似乎在我在本地运行时有效：

fiddle

所以我在这里做的是我正在创建初始图表，然后当我点击删除按钮时它获取当前数据并将其分配给变量，弹出最后一个值然后将其分配给运行更新功能之前的图表数据。

HTML：

<canvas id="myChart" width="400" height="400"></canvas>
<button onclick="removeLast()">
Remove
</button>

JS：

var options = {};

var currData = {
                labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                datasets: [
                    {
                        label: "Number of beers drunk in the last week",
                        data: [5, 7, 10, 4, 2, 8, 3]
                    }
]}

removeLast = function() {
    dataArray = currData.datasets[0].data;
    dataArray.pop();
  console.log(dataArray);
    currData.datasets[0].data = dataArray;
  console.log(currData.datasets[0].data)
    myLineChart.update();
}

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(currData);

这应该适用于发行版和测试版。

javascript chart.js删除最后一点

2 个答案: