javascript - Chartjs堆积条形图单个最大值

可以使用具有一个最大值的chartjs堆积条吗？

我有两个价值观。第一个是销售，第二个是从销售中获得的净收入。

我想同时展示两者，但我不想在销售价值之上增加收入，因为它已经是其中的一部分。

数据

sales (max value) | earning
500               | 100
300               | 30

现在显示的是600和330，而不是保持为500和300。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Sales',
        data: [500, 300],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)'
        ],
        borderWidth: 2
      },
      {
        label: 'Earning',
        data: [100, 30],
        backgroundColor: [
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 2
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

最佳答案

基本上，您需要在图表初始化之前从第一个值中减去第二个值，这样就不会绘制带有组合值的图形。

为此，您可以使用以下图表插件...

plugins: [{
   beforeInit: function(c) {
      var data1 = c.data.datasets[0].data;
      var data2 = c.data.datasets[1].data;
      c.data.datasets[0].data = data1.map(function(e, i) {
         return e - data2[i];
      });
   }
}]

添加此插件，然后添加图表选项。

更新

使用以下工具提示回调函数在工具提示的标签上显示旧值...

tooltips: {
   callbacks: {
      label: function(t, d) {
         var dst1_label = d.datasets[t.datasetIndex].label + ': ' + (+t.yLabel + d.datasets[1].data[t.index]);
         var dst2_label = d.datasets[t.datasetIndex].label + ': ' + t.yLabel;
         if (t.datasetIndex === 0) return dst1_label;
         else return dst2_label;
      }
   }
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
         label: 'Sales',
         data: [500, 300],
         backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 99, 132, 0.2)'
         ],
         borderColor: [
            'rgba(255,99,132,1)',
            'rgba(255,99,132,1)',
            'rgba(255,99,132,1)',
            'rgba(255,99,132,1)',
            'rgba(255,99,132,1)',
            'rgba(255,99,132,1)'
         ],
         borderWidth: 2
      }, {
         label: 'Earning',
         data: [100, 30],
         backgroundColor: [
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 159, 64, 0.2)'
         ],
         borderColor: [
            'rgba(255, 159, 64, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         borderWidth: 2
      }]
   },
   options: {
      scales: {
         yAxes: [{
            stacked: true,
            ticks: {
               beginAtZero: true
            }
         }],
         xAxes: [{
            stacked: true,
            ticks: {
               beginAtZero: true
            }
         }]
      },
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var dst1_label = d.datasets[t.datasetIndex].label + ': ' + (+t.yLabel + d.datasets[1].data[t.index]);
               var dst2_label = d.datasets[t.datasetIndex].label + ': ' + t.yLabel;
               if (t.datasetIndex === 0) return dst1_label;
               else return dst2_label;

            }
         }
      }
   },
   plugins: [{
      beforeInit: function(c) {
         var data1 = c.data.datasets[0].data;
         var data2 = c.data.datasets[1].data;
         c.data.datasets[0].data = data1.map(function(e, i) {
            return e - data2[i];
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>