重新加载ChartJs图像

时间:2018-01-24 08:57:57

标签: javascript jquery html charts chart.js

我有一个图表,在同一个画布中创建新图表之前,我调用myccc.destroy();并且效果很好。

但是,如果我创建图表的图像,之后如果我创建新图表,图像仍然存在。显然,我需要在重绘图表之前删除图表的图像以及图表本身。

我试过了;

$("#dialog_chart_img").remove();
$(".dialog_chart_img_div").append('<img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" />');

if (myccc != undefined || myccc != null) {
     myccc.destroy();
    }

var ctx = document.getElementById('dialog_chart');

      var myccc = new Chart(ctx, {
          type: 'horizontalBar',
          data: {
            labels: array_zaman,
            datasets: [{
              label: "Yumurta",
              data: array_adet,
            }]
          },
          options: {
            maintainAspectRatio: true,
            responsive: true,
            // maintainAspectRatio: true,
            legend: {
              display: false
            },
            animation: {
              duration: 1,
              onComplete: function(animation) {
                var chartInstance = this.chart,
                  ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize = 16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily = "charter");
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';

                this.data.datasets.forEach(function(dataset, i) {
                  var meta = chartInstance.controller.getDatasetMeta(i);
                  meta.data.forEach(function(bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y);
                  });
                });
                document.querySelector('#dialog_chart').remove();
                document.querySelector('#dialog_chart_img').setAttribute('src', this.toBase64Image());
              }
            }
          }
        });

HTML:

<div class="dialog_chart_img_div">
    <img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" /> <br> <br>
    <canvas id="dialog_chart" style="visibility:hidden;"></canvas>
</div>

如何在创建新图表后重新加载图像?

1 个答案:

答案 0 :(得分:0)

我不确定我是否了解您的问题,但是您不能通过执行myccc.update()来重绘图表吗?