将值放在多系列柱形图的图形上方

Question

我正在尝试将其中一个系列的值放在2系列堆积柱形图中。我尝试使用此链接Data Values Properties中显示的属性，但我没有看到在图表上应用的更改。 我需要将值放在顶部，仅用于其中一个系列而不是两者。 这是图表的屏幕截图。我需要突出显示第二个系列的值，因为它们在此图中不是清晰可见的。

这是我尝试实现这一目标的小提琴。 JS Fiddle Demo

我的XML如下：

<chart labelDisplay='ROTATE' useRoundEdges='0' slantLabels='1' 
formatNumber='1' formatNumberScale='0' plotGradientColor='' 
showValues='1' valuePosition='ABOVE' 
caption='Total Call vs LTL Call'>

<categories>
<category label='01AUG2014' />
<category label='02AUG2014' />
<category label='03AUG2014' />
</categories>
<dataset seriesName='TOTAL_CALL' color='FFFFCC'>
<set value='     11708' />
<set value='      7675' />
<set value='      8210' />
</dataset>
<dataset seriesName='LTL_TOTAL' color='800000'>
<set value='       158' />
<set value='        80' />
<set value='        34' />
</dataset>
</chart>

注意：我使用的是Fusion Charts V3.0

Answer 1

对于Stacked Column，在顶部显示一个数据集的值是不可行的。相反，请尝试使用“文本注释”，将第二个数据集的值放在数据图的顶部。

请检查JSFiddle here

＆＃13;

＆＃13;

    FusionCharts.ready(function () {
        var revenueChart = new FusionCharts({
            type: 'stackedcolumn2d',
            renderAt: 'chart-container',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Revenue split by product category",
                        "subCaption": "For current year",
                        "xAxisname": "Quarter",
                        "yAxisName": "% Revenue",
                        "numberPrefix": "$",
                        "showValues": "0",
                        "decimals": "0",
                        "theme": "fint",
                        "valuePosition": "auto",
    
                },
    
                    "categories": [{
                    "category": [{
                        "label": "Q1"
                    }, {
                        "label": "Q2"
                    }, {
                        "label": "Q3"
                    }, {
                        "label": "Q4"
                    }]
                }],
    
                    "dataset": [{
                    "seriesname": "Food Products",
                        "showValues": "1",
                        "data": [{
                        "value": "11000",
                            "valuePosition": "above"
                    }, {
                        "value": "15000",
                            "valuePosition": "above"
                    }, {
                        "value": "13500",
                            "valuePosition": "above"
                    }, {
                        "value": "15000",
                            "valuePosition": "above"
                    }]
                }, {
                    "seriesname": "Non-Food Products",
                        "data": [{
                        "value": "11"
                    }, {
                        "value": "14"
                    }, {
                        "value": "83"
                    }, {
                        "value": "11"
                    }]
                }],
                    "annotations": {
                    "groups": [{
                        "id": "infobar",
                            "items": [{
                            "id": "label",
                                "type": "text",
                                "text": "11",
                                "fillcolor": "#6baa01",
                                "rotate": "90",
                                "x": "$canvasStartX + 50",
                                "y": "$dataset.1.set.0.y - 10"
                        }, {
                            "id": "label1",
                                "type": "text",
                                "text": "14",
                                "fillcolor": "#6baa01",
                                "rotate": "90",
                                "x": "$canvasStartX + 160",
                                "y": "$dataset.1.set.1.y - 10"
                        }, {
                            "id": "label2",
                                "type": "text",
                                "text": "83",
                                "fillcolor": "#6baa01",
                                "rotate": "90",
                                "x": "$canvasStartX + 260",
                                "y": "$dataset.1.set.2.y - 10"
                        }, {
                            "id": "label1",
                                "type": "text",
                                "text": "11",
                                "fillcolor": "#6baa01",
                                "rotate": "90",
                                "x": "$canvasStartX + 370",
                                "y": "$dataset.1.set.3.y - 10"
                        }]
                    }]
                },
            }
        });
    
        revenueChart.render();
    });

＆＃13;

<!-- A simple 100% stacked column chart in FusionCharts showing revenue by product category for current year Attribute: # stack100Percent - Used to make Percentage distribution instead of actual values in a stacked chart -->
<div id="chart-container">FusionCharts will render here</div>

＆＃13;

＆＃13;

＆＃13;