javascript - 如何在新图表中添加不同的数据？

Question

我已将条形图制作成带有 init 和 destroy 函数的折线图，但我想在新图表中添加不同的数据和标签，因此折线图包含“棕榈油”、“葵花籽油”等标签，“橄榄油”等，但条形图保留原始数据。我该怎么做呢？当我向 init 函数添加数据时，整个图表就消失了。

    <script> 
            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'
      }
    };

    //Lägg till data            
function addData() {
  myBarChart.data.labels[6] ="Ekologisk palmolja";

  myBarChart.data.datasets[0].data[6] = 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
      });
    }



    function button() {
      //destroy chart:
      myBarChart.destroy();
      //change chart type: 
      this.chartType = (this.chartType == 'bar') ? 'line' : 'bar';


      //restart chart:
      init();
    }


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

}

                function removeData(e) {
  myBarChart.data.labels.splice(6, 1);
  myBarChart.data.datasets[0].data.splice(6, 1);
  myBarChart.update();
}

                document.getElementById('remove1').addEventListener('click', removeData);
            </script>

标签： javascriptchart.js

Answer 1

data每次创建图表时，您当前的代码都会提供相同的变量。下面是通过向 Chart 构造函数提供不同的配置选项在两个完全不同的图表之间切换的示例。

let lineConfig = {
    type: 'line',
    data: {
      labels: ['q', 'w', 'e', 'r', 't', 'y'],
      datasets: [{
        data: [6, 5, 4, 3, 2, 1]
      }]
    }
  },
  barConfig = {
    type: 'bar',
    data: {
      labels: ['a', 's', 'd', 'f', 'g', 'h'],
      datasets: [{
        data: [10, 20, 30, 40, 50, 60]
      }]
    }
  },
  activeType = 'bar', // we'll start with a bar chart.
  myChart;

function init(config) {
  // create a new chart with the supplied config.
  myChart = new Chart(document.getElementById('chart'), config);
}

// first init as a bar chart.
init(barConfig);

document.getElementById('switch').addEventListener('click', function(e) {
  // every time the button is clicked we destroy the existing chart.
  myChart.destroy();
  if (activeType == 'bar') {
    // chart was a bar, init a new line chart.
    activeType = 'line';
    init(lineConfig);
    return;
  }

  // chart was a line, init a new bar chart.
  activeType = 'bar';
  init(barConfig);
});

<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="switch">Switch</button>