javascript - Kendo图表数据标签格式

Question

我正在使用剑道图表。我需要以下面的格式显示各个堆积条形图的值。请找到下面的图片和 JSfiddle URL 以供引用。 Sample Code

$("#chart").kendoChart({
                    legend: {
                        visible: false
                    },
                    seriesDefaults: {
                        type: "bar",
                        stack: true
                    },
                    series: [{
                        name: "AA",
                        data: [10, 10, 10, 10, 10],
                        color: "#32CD32",

                    }, {
                        name: "BB",
                        data: [30, 10, 10, 10, 45],
                        color: "#0000FF",
                    }],
                    valueAxis: {
                        max: 180,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        },
                        labels: {
                            rotation: "auto",
                            visible: true
                        }
                    },
                    categoryAxis: {
                        categories: ['A', 'B', 'C', 'D', 'E'],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    chartArea: {
                        width: 500,
                        height: 255
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });

预期输出

Answer 1

您可以使用数据绑定(bind)和标签模板。绑定(bind)到:

var data = [
    {"Category": "A", "AA": 10, "BB": 30},
    {"Category": "B", "AA": 10, "BB": 10},
    {"Category": "C", "AA": 10, "BB": 10},
    {"Category": "D", "AA": 10, "BB": 10},
    {"Category": "E", "AA": 10, "BB": 45}
];

$("#chart").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: {
                    data: data
                } ,
                seriesDefaults: {
                    type: "bar",
                    stack: true
                },
                series: [{
                    name: "AA",
                    field: "AA",
                    color: "#32CD32",
                }, {
                    name: "BB",
                    field: "BB",
                    color: "#0000FF",
                    labels:{
                        visible: true,
                      template: "#: dataItem.AA # (#: dataItem.BB #)"
                    }
                }],
                valueAxis: {
                    max: 180,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: true
                    },
                    labels: {
                        rotation: "auto",
                        visible: true
                    }
                },
                categoryAxis: {
                    field: "Category",
                    majorGridLines: {
                        visible: false
                    }
                },
                chartArea: {
                    width: 500,
                    height: 255
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name #: #= value #"
                }
            });

<强> DEMO