使用PHP和MySQL在Chart.js中动态更改图表类型(例如从条形图到折线图)

wvt8vs2t 于 2023-01-13 发布在 Chart.js

关注(0)|答案(1)|浏览(151)

问候宁静和伟大，我希望你有一个美好的一天。我想问我应该包括什么代码，以使我的代码动态响应下拉按钮被选中。例如，我选择了酒吧，因此图表应该是酒吧;但是，当我选择线，图形应该是线。谢谢!（但它应该连接到MySQL和PHP）
代码：

$(document).ready(function () {
    showGraph();
});

const showGraph = () => {
    {
        $.post("assets/include/data.php",function (data)
        {
            console.log(data);
            var name = [];
            var marks = [];

            for (var i in data) {
                name.push(data[i].LEVEL);
                marks.push(data[i].TOTAL);
            }

            var chartdata1 = {
                labels: name,
                datasets: [
                    {
                        label: 'Grade Level',
                        backgroundColor: ['#88D969', '#46CB1B', '#06A10B', '#1D800E'],
                        hoverBackgroundColor: '#FCA510',
                        data: marks,
                        barPercentage: 1.0,
                        categoryPercentage: 1.0
                        
                    }
                ],
            };

            var graphTarget = $("#graph");

            var barGraph = new Chart(graphTarget, {
                type: 'bar',
                data: chartdata1,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    responsive: true
                }
            });
        });
    }
};

chart.js

来源：https://stackoverflow.com/questions/75043383/dynamic-changing-of-chart-type-bar-to-line-as-example-in-in-chart-js-with-php

1条答案

按热度按时间

v2g6jxz61#

当然，要做到这一点，你必须添加事件监听器，以便在你点击下拉菜单时运行一些代码。在你的事件处理程序中，Chart.js的一个安全策略是销毁图表，然后立即用一个新的配置对象创建另一个图表。下面是一个例子：

function config(type) {
  return {
    type,
    data: {
      labels: ['Category 1', 'Category 2', 'Category 3'],
      datasets: [{
        label: 'Dataset',
        data: [10, 20, 15]
      }]
    }
  }
}

function init(type) {
  return new Chart(document.getElementById('myChart'), config(type));
}

let chart = init('bar');

document.querySelector('#bar').addEventListener('click', () => {
  chart.destroy();
  chart = init('bar');
});

document.querySelector('#line').addEventListener('click', () => {
  chart.destroy();
  chart = init('line');
});

@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css";

.chart-container {
  position: relative;
  height: 90vh;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js" integrity="sha512-i9cEfJwUwViEPFKdC1enz4ZRGBj8YQo6QByFTF92YXHi7waCqyexvRD75S5NVTsSiTv7rKWqG9Y5eFxmRsOn0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle mt-3 mb-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
        </button>
        <ul class="dropdown-menu">
          <li><button id="bar" class="dropdown-item" type="button">Bar</button></li>
          <li><button id="line" class="dropdown-item" type="button">Line</button></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="chart-container">
        <canvas id="myChart"></canvas>
      </div>  
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-13

我来回答

使用PHP和MySQL在Chart.js中动态更改图表类型(例如从条形图到折线图)

1条答案

相关问题

热门标签

最新问答