CanvasJS React单图表两组堆叠柱形的间距及标签配置问题

1. 两组数据集添加间距实现方法 #

你当前配置中所有数据点未指定x值，默认共用相同x坐标导致两组堆叠柱无间距，只需要为两组堆叠柱分别设置不同的x坐标，再配合调整dataPointWidth参数即可灵活控制间距大小，原配置中冗余的Chart.js风格options.scales配置可以直接删除，CanvasJS不识别该参数。

2. 堆叠柱上方添加文本标签实现方法 #

在数据系列的dataPoints配置项中添加indexLabel属性即可实现柱顶标签，支持直接绑定y值、自定义文本内容，还可通过indexLabelFontColor、indexLabelFontSize等参数调整标签样式。

修改后完整配置如下：

{
    animationEnabled: true,
    dataPointWidth: 80, // 控制单根柱形宽度，配合x坐标差调整间距
    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 " ";
        },
        minimum: 0,
        maximum: 3 // 控制x轴范围，留出间距空间
    },
    toolTip: {
        shared: true
    },
    legend: {
        cursor:"pointer",
    },
    data: [
        // 第一组堆叠柱，x设为1
        {
            type: "stackedColumn",
            name: "Proven Oil Reserves (bn)",
            legendText: "Proven Oil Reserves",
            showInLegend: false, 
            dataPoints:[
                { x: 1, y: 30.25, indexLabel: "{y}" } // indexLabel控制柱顶标签
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            showInLegend: false,
            dataPoints:[
                { x: 1, y: 17.46, indexLabel: "{y}" }
            ]
        },
        // 第二组堆叠柱，x设为2，和第一组自然形成间距
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            showInLegend: false,
            dataPoints:[
                { x: 2, y: 10.46, indexLabel: "{y}" }
            ]
        },
        {
            type: "stackedColumn",  
            name: "Oil Production (million/day)",
            legendText: "Oil Production",
            axisYType:"secondary",
            showInLegend: false,
            dataPoints:[
                { x: 2, y: 10.46, indexLabel: "{y}" }
            ]
        }
    ]
}

内容的提问来源于stack exchange，提问作者anoop francis