如何使用kendo-ui图表栏为每个条形组显示两个标签 [英] How do I show two labels for each bar group using kendo-ui chart bar
本文介绍了如何使用kendo-ui图表栏为每个条形组显示两个标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$（ ＃chart）。kendoChart（
{title：{
text： 每篇文章总数的角色分布（每个选定的级别） ）
}，
chartArea：{
width： 800 ，heigth： 500 ，
stack：{type： 100％ }，
legend：{visible： true }，
seriesDefaults：{type： column}，
series：[
{
name： ，
堆栈： 图表，
d ata：chart_Profiling // [76067,0,0]
}，
{
name： B，
stack：< span class =code-string> 图表，
data：chart_Compulsory // [14183,0,0]
}，
{
name： C，
stack： < span class =code-string> Chart，
data：chart_Complement // [ 1197,465606,6567]
}，
{
name： ，
visibleInLegend： false ，
stack： Chart1，
data：chart_Profiling_1 // [76067,0,0]
}，
{
name： < span class =code-string>，
visibleInLegend： false ，
stack： Chart1，
data：chart_Compulsory_1 // [14183,0,0]
}，
{
name： ，
visibleInLegend： false ，
stack： Chart1，
data：chart_Complement_1 // [1197,465606,6567]
} ，
]，
seriesColors：[ rgb（214,186,114）， rgb（197,200,203），
rgb（170,115,80）]，
valueAxis：{
// majorUnit：（max7 / 10），
// max :( max7 +（max7 / 6）），
max：max7，
min： 0 ，
标签：{
te mplate： ＃= kendo.format（'{0：N0}'，value）＃
}，
行：{
可见： true
}
}，
categoryAxis： {
类别：[Category1，Category2，Category3，Category4]，
majorGridLines：{
visible： true
} ，
标签：{
轮换：-45
}
}，
工具提示：{
visible： true ，
模板： ＃= series.name＃：＃= value＃
}，pannable：{
// lock：y
}，
zoomable：{
mousewheel：{
// lock：y
}，
选择：{
// lock：y
}
}
}）;
}
我的尝试：
我试图使用kendo-ui控件并使用上面的代码为每个图表组显示两个标签。但是没有提出解决方案。
如何使用上面的代码，请参考MyChart.png： -
MyChart.png - Google云端硬盘 [ ^ ]
以这种方式我要显示，请找截图： -
Stack Bar.png - Google云端硬盘 [ ^ ]
解决方案
（ ＃chart）。kendoChart（
{title：{
text： 每篇文章总数的角色分布（每个选定的级别）
}，
chartArea：{
宽度： 800 ，高度： 500 ，
堆栈：{type： 100％}}，
legend：{visible： true }，
seriesDefaults：{type： column} ，
系列：[
{
name： A ，
stack： Chart，
data：chart_Profiling // [76067,0,0]
}，
{
name： B，
stack： 图表，
数据：chart_Compulsory // [14183， 0,0]
}，
{
name： C，
stack： Chart，
数据：chart_Complement // [1197,465606,6567]
}，
{
name： ，
visibleInLegend ： false ，
stack： Chart1 ，
数据：chart_Profiling_1 // [76067,0,0]
}，
{
name： ，
visibleInLegend： false ，
stack： Chart1，
data：chart_Compulsory_1 // [14183,0,0 ]
}，
{
name： ，
visibleInLegend： false ，
stack： Chart1，
data：chart_Complement_1 // [1197,465606,6567]
}，
]，
seriesColors： [ rgb（214,186,114）， rgb（197,200,203），
rgb（170,115,80）]，
valueAxis：{
// majorUnit：（max7 / 10），
// max：（max7 +（max7 / 6）），
max：max7，
min： 0 ，
标签：{
模板： ＃= kendo.format（'{0：N0}'，value）＃
}，
line：{
visible：< span class =code-keyword> true
}
}，
categoryAxis：{
categories：[Category1，Category2，Category3，Category4]，
majorGridLines：{
visible： true
}，
标签：{
轮换：-45
}
}，
工具提示：{
visible： true ，
模板： ＃= series.name＃：＃= value＃
}，pannable：{
// lock：y
}，
zoomable：{
mousewheel ：{
// lock：y
}，
选择：{
// lock：y
}
}
}）;
}
我的尝试：
我试图使用kendo-ui控件并使用上面的代码为每个图表组显示两个标签。但是没有提出解决方案。
如何使用上面的代码，请参考MyChart.png： -
MyChart.png - Google云端硬盘 [ ^ ]
以这种方式我要显示，请找截图： -
Stack Bar.png - Google云端硬盘 [ ^
$("#chart").kendoChart(
{ title: {
text: "Distribution of roles per total number of articles (per selected levels)"
},
chartArea: {
width: 800, heigth: 500,
stack: { type: "100%" } },
legend: { visible: true },
seriesDefaults: { type: "column" },
series: [
{
name: "A",
stack: "Chart",
data: chart_Profiling//[76067, 0, 0]
},
{
name: "B",
stack: "Chart",
data: chart_Compulsory//[14183, 0, 0]
},
{
name: "C",
stack: "Chart",
data: chart_Complement//[1197, 465606, 6567]
},
{
name: "",
visibleInLegend: false,
stack: "Chart1",
data: chart_Profiling_1//[76067, 0, 0]
},
{
name: "",
visibleInLegend: false,
stack: "Chart1",
data: chart_Compulsory_1 //[14183, 0, 0]
},
{
name: "",
visibleInLegend: false,
stack: "Chart1",
data: chart_Complement_1//[1197, 465606, 6567]
},
],
seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)",
"rgb(170,115,80)"],
valueAxis: {
//majorUnit: (max7 / 10),
//max: (max7 + (max7 / 6)),
max: max7 ,
min: 0,
labels: {
template: "#= kendo.format('{0:N0}', value ) # "
},
line: {
visible: true
}
},
categoryAxis: {
categories: [Category1,Category2,Category3,Category4],
majorGridLines: {
visible: true
},
labels: {
rotation: -45
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}, pannable: {
// lock: "y"
},
zoomable: {
mousewheel: {
// lock: "y"
},
selection: {
// lock: "y"
}
}
});
}
What I have tried:
I have tried to show two labels in for each chart group using kendo-ui controls and also using above code.But didn't come up with solution.
How i get using above code,please refer MyChart.png:-
MyChart.png - Google Drive[^]
In this manner i want to display,please find screenshot:-
Stack Bar.png - Google Drive[^]
解决方案
("#chart").kendoChart( { title: { text: "Distribution of roles per total number of articles (per selected levels)" }, chartArea: { width: 800, heigth: 500, stack: { type: "100%" } }, legend: { visible: true }, seriesDefaults: { type: "column" }, series: [ { name: "A", stack: "Chart", data: chart_Profiling//[76067, 0, 0] }, { name: "B", stack: "Chart", data: chart_Compulsory//[14183, 0, 0] }, { name: "C", stack: "Chart", data: chart_Complement//[1197, 465606, 6567] }, { name: "", visibleInLegend: false, stack: "Chart1", data: chart_Profiling_1//[76067, 0, 0] }, { name: "", visibleInLegend: false, stack: "Chart1", data: chart_Compulsory_1 //[14183, 0, 0] }, { name: "", visibleInLegend: false, stack: "Chart1", data: chart_Complement_1//[1197, 465606, 6567] }, ], seriesColors: ["rgb(214,186,114)", "rgb(197,200,203)", "rgb(170,115,80)"], valueAxis: { //majorUnit: (max7 / 10), //max: (max7 + (max7 / 6)), max: max7 , min: 0, labels: { template: "#= kendo.format('{0:N0}', value ) # " }, line: { visible: true } }, categoryAxis: { categories: [Category1,Category2,Category3,Category4], majorGridLines: { visible: true }, labels: { rotation: -45 } }, tooltip: { visible: true, template: "#= series.name #: #= value #" }, pannable: { // lock: "y" }, zoomable: { mousewheel: { // lock: "y" }, selection: { // lock: "y" } } }); }
What I have tried:
I have tried to show two labels in for each chart group using kendo-ui controls and also using above code.But didn't come up with solution.
How i get using above code,please refer MyChart.png:-
MyChart.png - Google Drive[^]
In this manner i want to display,please find screenshot:-
Stack Bar.png - Google Drive[^]
这篇关于如何使用kendo-ui图表栏为每个条形组显示两个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
