文章/答案/技术大牛

发布

社区首页 >问答首页 >更改chartType onclick ChartJS

问更改chartType onclick ChartJS
EN

Stack Overflow用户

提问于 2020-12-18 17:39:22

回答 1查看 372关注 0票数 0

所以我用ChartJS制作了一个图表，但我想通过点击按钮将chartType从“线条”更改为“条形”。

我尝试过这样的东西：

let chartType = 'line';
function click() {
  chartType = 'bar';
}

在下面，我只需粘贴以下内容：

type: chartType,
data: donationChartBuilder,
etc

但这不是在我的按钮点击时更新我的图表？

我已经正确地设置了按钮：

... onclick="click()" ...

javascript

html

laravel

chart.js

Stack Overflow用户

发布于 2020-12-18 18:01:05

您可以添加一个全局变量来实例化图表对象，并使用javascript对其进行处理，这里有一个示例，其中包含3个按钮，每个类型一个按钮

<button onclick="draw_line()">Line</button>
<button onclick="draw_bar()">Bar</button>
<button onclick="draw_pie()">Pie</button>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    var chart;
    var types = ['line', 'bar', 'pie'];
    var current_type = 0;
    draw_initial();
    
    function switch_type(){
      if(current_type++ == types.length-1) current_type = 0;
      switch(current_type){
        case 0: draw_line(); break;
        case 1: draw_bar(); break;
        case 2: draw_pie(); break;
      }
    }
    
    function draw_pie() {
       if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
    var data_colors = [
        'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
    ];
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];
     
     /* Creating the new chart */
     
     var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'pie',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    
    function draw_bar() {    
    if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
    var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];
         
     /* Creating the new chart */
     
    var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    function draw_line() {
   if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
     var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];
         
     /* Creating the new chart */
     
    var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    function draw_initial() {
    draw_line();
    }
    </script>

在重新加载图表对象以更改其tipe之前，您必须记住实例化图表对象的销毁函数。

更新

如果您只想使用一个按钮，您可以使用相同的逻辑，但是对于图表的类型，在本例中我添加了一个全局变量，其中包含一个具有所有可用类型的数组，但您可以根据需要执行此操作。

<button onclick="switch_type()"> Change type </button>
<span style="margin-left:10px">Hi, I'm a 
    
    <span id="chart-type"></span> chart :)

</span>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    var chart;
    var types = ['line', 'bar', 'pie'];
    var current_type = 0;
    draw_initial();
    
    function switch_type(){
      if(current_type++ == types.length-1) current_type = 0;
      switch(current_type){
        case 0: draw_line(); break;
        case 1: draw_bar(); break;
        case 2: draw_pie(); break;
      }
    }
    
    function draw_pie() {
       if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
    var data_colors = [
        'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
      'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')',
    ];
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];

     $("#chart-type").html("pie"); // Adding some info
     
     /* Creating the new chart */
     
     var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'pie',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    
    function draw_bar() {    
    if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
     var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];
    
     $("#chart-type").html("bar"); // Adding some info
     
     /* Creating the new chart */
     
    var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    function draw_line() {
   if(chart) chart.destroy(); // Check if chart object exists and if it exists, destroy it.
    
    /* Generating random data and colors */
    
     var data_colors = 'rgb('+(Math.floor(Math.random() *150)+75)+','+(Math.floor(Math.random() *200)+25)+','+(Math.floor(Math.random() *200)+25)+')';
    var data_values = [
        Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
      Math.floor(Math.random() *100),
    ];
    
     $("#chart-type").html("line"); // Adding some info
     
     /* Creating the new chart */
     
    var ctx = document.getElementById('myChart').getContext('2d');
    chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
    
        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: data_colors,
                borderColor: data_colors,
                data: data_values
            }]
        },
    
        // Configuration options go here
        options: {}
    });
    }
    
    function draw_initial() {
    draw_line();
    }
    </script>

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65354691

复制

相似问题

问更改chartType onclick ChartJS
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改chartType onclick ChartJSEN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改chartType onclick ChartJS
EN