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>

Answer 1

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

data

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);
});

如何在新图表中添加其他数据？

1 个答案: