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);

KendoUI - 图表数据标签

2 个答案: