Chart.js中的堆叠图形栏图例选项问题

时间:2019-04-09 07:59:43

标签: angular6 chart.js

我在角6中使用chart.js创建了3个堆叠的垂直条形图,它上面有3个图例,当我单击一个图例时,将显示另外2个堆叠的条形图,其中一个会隐藏,但是问题是,下一个条形图的值将与上一个条形图重叠。可能是什么问题?请帮助我

public barChartOptions: any = {
    animationEasing: 'easeInCirc',
    animationSteps: 80,
    scaleShowVerticalLines: false,
    responsive: true,
    maintainAspectRatio: false,
    showTooltips: true,
    legend: {
      position: 'bottom'
    },

    showInlineValues : true,
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          autoSkip: false,
          beginAtZero: true,
          callback: function(t) {
            var maxLabelLength = 15;
            if (t.length > maxLabelLength) return t.substr(0, maxLabelLength) + '...';
            else return t;
          }
        },
        gridLines: {
          display:false,

        }
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          display:false,
          right:'17%'
      }, ticks: {
        display: false,
        beginAtZero: true,
        min: 0,
        max:15,
        stepSize: 1
    }
      },
    ]
    },
    tooltips: {
      callbacks: {
        title: function(t, d) {
           return d.labels[t[0].index];
        }
      },
      mode: 'index',
      intersect: false
    },
    hover: {
      animationDuration: 0,
      mode: 'index',
      intersect: false
    },
    animation: {

      onComplete: function () {
        var chartInstance = this.chart,
        ctx = chartInstance.ctx;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fontColor = "#fff";
        ctx.fillStyle = "#fff";


          this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
              var data = dataset.data[index];
              if (chartInstance.data.datasets[i].data[index] !== 0) {
                ctx.save();
                ctx.fillText(data, bar._model.x, bar._model.y + 16);
                ctx.fillText(dataset.data[index], 0, 0);
                ctx.restore();
              }
            });
          });
      }
    }
  };

Initially the graph will look this

After click on one of legend, it will display like this

0 个答案:

没有答案