在一个图表中显示两个不同的堆叠列数据 canvasjs 反应答案

【问题标题】：show two different stacked column data in one chart canvasjs react在一个图表中显示两个不同的堆叠列数据 canvasjs 反应
【发布时间】：2021-10-27 15:18:56
【问题描述】：

我想使用这样的 canvasjs 在一个图表中显示两个堆叠的列数据：

我目前使用以下选项做了类似的事情：这样就实现了去掉x轴和次y轴，同时显示两个数据

{
        animationEnabled: true,
        options:{
        scales: {
            xAxes: [{ stacked:true}]
                }
        },
        axisY: {
            titleFontColor: "#4F81BC",
            lineColor: "#4F81BC",
            labelFontColor: "#4F81BC",
            tickColor: "#4F81BC",
            margin:24,
        },
        axisY2: {
            gridThickness: 0,
            tickLength: 0,
            lineThickness: 0,
            margin:24,
            labelFormatter: function(){
            return " ";
            }  
          },
        axisX:{
            gridThickness: 0,
            tickLength: 0,
            lineThickness: 0,
            margin:24,
            labelFormatter: function(){
            return " ";
            }
        },
        toolTip: {
            shared: true
        },
        legend: {
            cursor:"pointer",
        },
        data: [{
            type: "stackedColumn",
            name: "Proven Oil Reserves (bn)",
            legendText: "Proven Oil Reserves",
            showInLegend: false, 
            dataPoints:[
                { y: 30.25 },
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            showInLegend: false,
            dataPoints:[
                { y: 17.46 },
    
            ]
        },
                   {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            margin:10,
            showInLegend: false,
            dataPoints:[
                {  y: 10.46 },
    
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            margin:10,
            showInLegend: false,
            dataPoints:[
                { y: 10.46 },
    
            ]
        }
    ]
    }

它产生如下结果：

我需要的是

在两个数据集之间留出余量
能够如上图所示用文本标记数据集

【问题讨论】：

标签： javascript html reactjs canvasjs

【解决方案1】：

在两个数据集之间留出余量

x-values 不同时，数据点之间会有差距。

如上图所示，能够用文本标记数据集

您可以使用indexlabels。请参阅CanvasJS Docs 了解更多信息/示例。下面是一个工作示例。

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  axisX:{
    gridThickness: 0,
    tickLength: 0,
    lineThickness: 0,
    labelFormatter: function(){
      return "";
    }
  },
  axisY: {
    includeZero: true,
    tickLength: 0,
    lineThickness: 0,
    gridColor: "#ddd",
    labelFormatter: function(e) {
      return "";
    }
  },
  toolTip: {
    shared: true
  },
  data: [{
    type: "stackedColumn",
    indexLabel: "RM xyz",
    indexLabelFontColor: "#fff",
    dataPoints: [
      { x: 1, y: 47, color: "#c63531" },
      { x: 2, y: 32, color: "#449fc7" }
    ]
  }, {
    type: "stackedColumn",
    indexLabel: "RM xyz",
    indexLabelFontColor: "#fff",
    dataPoints:[
      { x: 1, y: 32, color: "#bb8786" },
      { x: 2, y: 27, color: "#74ab3e" }
    ]
  }]
});

chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

【讨论】：