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

Question

是否可以使用具有一个最大值的 ChartJS 堆叠条形图？

我有两个值(value)观。一是销售额，二是来自销售的净收入。

我想显示两者，但我不想在销售值(value)之上添加收入，因为它已经是其中的一部分。

数据

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>

Answer 1

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

要实现此目的，您可以使用以下图表插件...

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>