Question

实际上，在我的网站上，我使用来自MySQL数据库的一些数据来构建字符。

每次按下图表按钮时，都会出现一个模式对话框，AJAX调用将发送到服务器，然后绘制图表。

问题在于，在将新数据添加到数据库中并通过使用ChartJS打开模式后，通过移动鼠标，ChartJS在具有新数据的图表和旧数据之间的倾斜。

这是代码

var chart;

$(function () {
    renderChart();
});


function renderChart() {
    var ctx = document.getElementById('barchart').getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, '#007AFD');
    gradient.addColorStop(1, '#00B1FF');
    var options = {
        legend: false,
        maintainAspectRatio: false,
        tooltips: {
            displayColors: false
        },
        scales: {
            xAxes: [{
                gridLines: {
                    display: false,
                },
                barPercentage: 0.3,
            }],
            yAxes: [{
                ticks: {
                    stacked: true,
                    stepSize: 1,
                    beginAtZero: true,
                },
                gridLines: {
                    borderDash: [5, 15],
                    drawBorder: false
                }
            }]
        }
    };
    chart = new Chart(ctx, { type: 'bar', labels: [], data: [] });
}

function loadReports(data) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/getReports",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ data: data }),
        dataType: "json",
        success: function (r) {
            data = r.d;
            if (data != '[]') {
                data = jQuery.parseJSON(data);
                chart.data.labels = data.map(ora => ora.ORARIO);
                chart.data.datasets[0].data[0] = data.map(cop => cop.COPERTI);
                chart.update();
            } else {
                chart.data.labels = [];
                chart.data.datasets[0].data = [];
                chart.update();
            }

        },
        error: function (error) {
            alert(error.responseText);
        }
    });

}

在加载时调用buildChart（），并在JS文件顶部声明图表

Answer 1

您是否通过单击按钮来绘制新图表？您应该只绘制1次图表，然后更新数据：

function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

文档：https://www.chartjs.org/docs/latest/developers/updates.html

您可以使用以下代码进行尝试：

 $.ajax({
  type: "POST",
  url: "Default.aspx/getReports",
  contentType: "application/json; charset=utf-8",
  data: JSON.stringify({ data: data }),
  dataType: "json",
  success: function(r) {
    data = r.d;
    if (data != "[]") {
      data = jQuery.parseJSON(data);
      chart.data.labels = data.map(ora => ora.ORARIO);
      chart.data.datasets[0].data = data.map(coperti => coperti.COPERTI);
      chart.update();
    } else {
      chart.data.labels = [];
      chart.data.datasets[0].data = [];
      chart.update();
    }
    $("#modalChart").modal("show");
  },
  error: function(error) {
    alert(error.responseText);
  }
});

添加新数据后，ChartJS图表出现错误

1 个答案: