javascript - 在另一个栏上显示 ChartJS Stacked 栏以进行目标与销售分析

Question

我正在使用 ChartJS 插件创建一个图表来显示业务的目标与销售分析。销售也发生在店内和网上。

下面是我想要创建的图表。

但是，使用下面的 ChartJS Canvas Javascript，只有中间的条正确堆叠，第一个 + 最后一个条对齐被置换。

此外，只有最后一个栏显示适当栏中的数字，其余栏位于错误的位置。

如果我必须隐藏任何特定柱上的数字，我该如何隐藏？比如，我想隐藏 Canvas 中的所有 Target 数字。

var data = {
    labels: ["Paris", "London", "Mumbai"],
    datasets: [{
            label: "Target",
            backgroundColor: 'rgba(0,0,0,0.5)',
            data: [40, 40, 40],
            xAxisID: "bar-x-axis1"
        }, {
            label: "Store",
            backgroundColor: 'blue',
            data: [15, 25, 15],
            xAxisID: "bar-x-axis2"
        }, {
            label: "Online",
            backgroundColor: 'red',
            data: [20, 30, 35],
            xAxisID: "bar-x-axis2"
        }]
};

var options = {
    scales: {
        xAxes: [{
                stacked: true,
                id: "bar-x-axis2",
                categoryPercentage: 0.4,
                barPercentage: 0.9
            },
            {
                stacked: true,
                display: false,
                id: "bar-x-axis1",
                type: 'category',
                categoryPercentage: 0.5,
                barPercentage: 0.9,
                gridLines: {
                    offsetGridLines: true
                }
            }],
        yAxes: [{
                stacked: false,
                ticks: {
                    beginAtZero: true
                }
            }]
    },
    plugins: {
        datalabels: {
            color: '#ffffff'
        }
    },
    tooltips: {
        mode: 'label',
        callbacks: {
            label: function (tooltipItem, data) {
                var type = data.datasets[tooltipItem.datasetIndex].label;
                var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                var total = 0;
                for (var i = 0; i < data.datasets.length; i++)
                    total += data.datasets[i].data[tooltipItem.index];
                if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                    return type + " : " + valor.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
                } else {
                    return [type + " : " + valor.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,')];
                }
            }
        }
    }
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

这是 https://jsfiddle.net/kingBethal/xpvt214o/594234/

Answer 1

This看起来大致像你想要的那样:

var data = {
  labels: ["Paris", "London", "Mumbai"],
  datasets: [{
    label: "Store",
    backgroundColor: 'blue',
    data: [15, 20, 25],
    xAxisID: "bar-x-axis2",
    stack: "background"
  }, {
    label: "Online",
    backgroundColor: 'red',
    data: [30, 25, 15],
    xAxisID: "bar-x-axis2",
    stack: "background"
  }, {
    label: "Target",
    backgroundColor: 'rgba(0,0,0,0.5)',
    data: [30, 40, 50],
    xAxisID: "bar-x-axis1",
    fill: false
  }]
};

var options = {
  scales: {
    xAxes: [{
      id: "bar-x-axis2",
      stacked: true,
      categoryPercentage: 0.5,
      barPercentage: 0.5,
    },  {
      display: false,
      id: "bar-x-axis1",
      type: 'category',
      categoryPercentage: 0.4,
      barPercentage: 1,
      gridLines: {
        offsetGridLines: true
      },
      stacked: true
    }],
    yAxes: [{
      max: 100,
      min: 0,
      stacked: true
    }]

  }
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});