如何通过按下按钮（chart.js）制作新图表？

Question

我想知道是否可以通过按下按钮从条形图变为饼图？

<script>        
var ctx = document.getElementById("myCanvas");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [{
            label: 'Miljoner ton',
            data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
            backgroundColor: 'rgb(124,181,236)'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }

            }]
        }
    }
});

function adddata() {

    myChart.data.datasets[0].data[7] = 14;
    myChart.data.labels[7] = "Newly added";

    myChart.update();

}
</script>

Answer 1

遵循完美链接https://codepen.io/mateegojra/pen/GXVOap

->add('distinction',
      null,
      [
          'attr' => array('id' => "distinct_form"),
          'required' => false,
          'label' => 'distinction'
      ])

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: ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
  datasets: [{
    label: "UFO Sightings",
    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: [10, 13, 17, 12, 30, 47, 60, 120, 230, 300, 310, 400],
    spanGaps: true,
  }]
};

// Notice the scaleLabel at the same level as Ticks
var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },
  title: {
    fontSize: 18,
    display: true,
    text: 'I want to believe !',
    position: 'bottom'
  }
};


// 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 toggleChart() {
  //destroy chart:
  myBarChart.destroy();
  //change chart type: 
  this.chartType = (this.chartType == 'bar') ? 'line' : 'bar';
  //restart chart:
  init();
}

body{
  background-color: black;
}
.as-console-wrapper{display: none !important }
#barChart{
  background-color:rgba(255,255,255,0.1);
  border-radius: 6px;
/*   Check out the fancy shadow  on this one */

}

.btn{
  color:black;
}

Answer 2

在您的onclick函数中放置以下代码：

myChart.type = "pie";
myChart.update();