javascript - 设置 Shield UI JavaScript 图表堆叠模式属性

Question

我正在尝试为我的 Shield UI JavaScipt Chart 设置一些堆叠。我使用以下代码，这似乎不起作用：

$(function () {
    $("#chart").shieldChart({
        primaryHeader: {
            text: 'Shield UI Inversed Bar Chart Example',
            align: 'center'
        },
        isInverted: true,
        seriesSettings: {
            dataSeries: [
                {
                    seriesType: 'bar',
                    stackMode: "percent",
                    collectionAlias: 'Series A',
                    data: [12, 22, 25, 32, 33, 25]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series B',
                    data: [22, 11, 22, 31, 32, 22]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series C',
                    data: [20, 37, 11, 22, 25, 24]
                }
            ]
        });

});

我也尝试使用 stackMode: "normal"，但它并没有解决问题。

Answer 1

这是具有更正语法的代码：

$(function () {
    $("#chart").shieldChart({
        primaryHeader: {
            text: 'Shield UI Inversed Bar Chart Example',
            align: 'center'
        },
        isInverted: true,
        seriesSettings: {
            dataSeries: [
                {
                    seriesType: 'bar',
                    stackMode: "percent",
                    collectionAlias: 'Series A',
                    data: [12, 22, 25, 32, 33, 25]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series B',
                    data: [22, 11, 22, 31, 32, 22]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series C',
                    data: [20, 37, 11, 22, 25, 24]
                }
            ]
        }
    });
});

Answer 2

stackMode 属性适用于整个图表，例如所有系列。不允许按系列放置。这也没有任何意义。

seriesSettings: {
bar: {
stackMode: "percent"
}
},

这是您可以测试的整个代码：

$(function() {
  $("#chart").shieldChart({  
primaryHeader: {
    text: 'Shield UI Inversed Bar Chart Example',
    align: 'center'
},
isInverted: true,
seriesSettings: {
bar: {
stackMode: "percent"
}
},    
dataSeries: [
  {
seriesType: 'bar',
collectionAlias: 'Series A',
data: [12,-522,25,32,33,25]
  }, 
  {
seriesType: 'bar',
collectionAlias: 'Series B',
data: [22,11,22,31,32,22]
  },
  {
seriesType: 'bar',
collectionAlias: 'Series C',
data: [20,37,11,22,25,24]
  }  
]
  });

  });