如何使用kendo-ui图表栏为每个条形组显示两个标签

本文介绍了如何使用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： 图表， 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 ，标签：{ 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： 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图表栏为每个条形组显示两个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！