kendo-ui - KendoUI - 图表数据标签

Question

KendoUI 图表（区域）是否可以有多个数据标签，甚至两个数据标签的串联？我需要为每个数据点显示一个值和一个百分比。这是需要在数据源端处理的事情还是在视图上？

谢谢你的帮助。

Answer 1

您可以使用模板来格式化标签和工具提示；请参阅labels.template和tooltip.template。

Answer 2

关键是使用 dataItem ex 引用您想要的属性：

dataItem.TotalDollars

template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"

除非您对 Kendo UI 框架有深入的了解，否则上面的答案不会真正有帮助。我遇到了类似的问题，在找到答案之前，我发现了这个问题。我回圈了，因为答案很简单，一些简单的示例代码真的很简单。让我们为大家节省一些点击。

来自远程数据的数据响应（本地绑定的复制和过去）：

[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]

**图表生成代码：**

function createChart() {
    $("#SubmissionSummaryByProgramChart").kendoChart({
        title: {
            text: "Breakdown by Program"
        },
        legend: {
            position: "right"
        },
        dataSource: {
            transport: {
                read: {
                    url: "GetFooData",
                    dataType: "json",
                    data: {
                        Year : 2014,
                        Quarter : 1,
                    }
                }
            }
        },
        series: [{
            type: "pie",
            field: "PercentageShare",
            categoryField: "ProgramName"
        }],
        tooltip: {
            visible: true,
            template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
        }
    });
};

$(document).ready(createChart);