在一个图表中显示两个不同的堆积列数据 canvasjs react

Question

我想使用 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 },
    
            ]
        }
    ]
    }

它产生如下结果：

我需要的是

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

Answer 1

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

当x 值不同时，数据点之间会有差距。

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

您可以使用indexlabels 。 请参阅CanvasJS 文档以获取更多信息/示例。 下面是一个工作示例。

 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>