添加数据后删除数据（chart.js）

林妮·本格森

我的条形图中有一个添加数据功能，但是我希望能够通过onclick删除此数据。我该怎么做呢？

var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');
// We are only changing the chart type, so let's make that a global variable along with the chart object:
var chartType = 'bar';
var myBarChart;

// Global Options:
Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;

var data = {
  labels: [ "2012", "2013", "2014", "2015", "2016", "2017"],
  datasets: [{
    label: "Miljoner ton",
    fill: true,
    lineTension: 0.1,
    backgroundColor: "rgba(0,255,0,0.4)",
    borderColor: "green", // The main line color
    borderCapStyle: 'square',
    pointBorderColor: "white",
    pointBackgroundColor: "green",
    pointBorderWidth: 1,
    pointHoverRadius: 8,
    pointHoverBackgroundColor: "yellow",
    pointHoverBorderColor: "green",
    pointHoverBorderWidth: 2,
    pointRadius: 4,
    pointHitRadius: 10,
    data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
    spanGaps: true,
  }]
};

// Notice the scaleLabel at the same level as Ticks
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },
  title: {
    fontSize: 18,
    display: true,
    text: 'Källa: Globallife.org',
    position: 'bottom'
  }
};


function addData() {
    myBarChart.data.labels[7] ="Ekologisk palmolja";
    myBarChart.data.datasets[0].data[7] = 14;
    myBarChart.update();
}

// We add an init function down here after the chart options are declared.

init();

function init() {
  // Chart declaration:
  myBarChart = new Chart(ctx, {
    type: chartType,
    data: data,
    options: options
  });
}

兴奋剂

下面是一个工作示例，演示了单击按钮时如何修改和更新图表。您的addData函数有点奇怪，因为它在索引7处添加数据，但是数据集只有键0-5，因此这会在索引6处插入额外的空白数据点。

如果这不是您想要的，我添加了一些额外的函数（pushData和popData）来显示从数据集的末尾添加和删除，因为这是非常常见的要求（因此已记录在案）。

// same as original function; inserts or updates index 7.
function addData(e) {
  myBarChart.data.labels[7] = "Ekologisk palmolja";
  myBarChart.data.datasets[0].data[7] = 14;
  myBarChart.update();
}

// requested function; removes index 7.
function removeData(e) {
  myBarChart.data.labels.splice(7, 1);
  myBarChart.data.datasets[0].data.splice(7, 1);
  myBarChart.update();
}

// example of how to add data point to end of dataset.
function pushData(e) {
  myBarChart.data.labels.push("Ekologisk palmolja");
  myBarChart.data.datasets[0].data.push(14);
  myBarChart.update();
}

// example of how to remove data point from end of dataset.
function popData(e) {
  myBarChart.data.labels.pop();
  myBarChart.data.datasets[0].data.pop();
  myBarChart.update();
}

// set listeners on buttons
document.getElementById('add1').addEventListener('click', addData);
document.getElementById('remove1').addEventListener('click', removeData);
document.getElementById('add2').addEventListener('click', pushData);
document.getElementById('remove2').addEventListener('click', popData);

Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontSize = 16;
let myBarChart = new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
    datasets: [{
      label: "Miljoner ton",
      fill: true,
      lineTension: 0.1,
      backgroundColor: "rgba(0,255,0,0.4)",
      borderColor: "green", // The main line color
      borderCapStyle: 'square',
      pointBorderColor: "white",
      pointBackgroundColor: "green",
      pointBorderWidth: 1,
      pointHoverRadius: 8,
      pointHoverBackgroundColor: "yellow",
      pointHoverBorderColor: "green",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 10,
      data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
      spanGaps: true
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    title: {
      fontSize: 18,
      display: true,
      text: 'Källa: Globallife.org',
      position: 'bottom'
    }
  }
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
<button id="add1">Add index 7</button>
<button id="remove1">Remove index 7</button>
<button id="add2">Add to end</button>
<button id="remove2">Remove from end</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。