单击按钮即可设置 Kendo Ui 条形图系列
Posted
技术标签:
【中文标题】单击按钮即可设置 Kendo Ui 条形图系列【英文标题】：Kendoui bar chart set series on click of a button 【发布时间】：2016-06-08 13:18:58 【问题描述】：我正在使用 KendoUI 条形图。请检查此fiddle。在这个小提琴中，我在设计时设置series config。我想在运行时通过单击按钮将series 添加到图表中。如何通过单击按钮将series 添加到剑道图表。
目前series 是在设计时分配的，我想在运行时通过单击按钮执行相同的操作。
代码：
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked-bar">
<style>html font-size: 14px; font-family: Arial, Helvetica, sans-serif; </style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart()
$("#chart").kendoChart(
title:
text: "World population by age group and sex"
,
legend:
visible: false
,
seriesDefaults:
type: "column"
,
series: [
name: "0-19",
stack: "Female",
data: [854622, 925844, 984930, 1044982, 1100941, 1139797, 1172929, 1184435, 1184654]
,
name: "20-39",
stack: "Female",
data: [490550, 555695, 627763, 718568, 810169, 883051, 942151, 1001395, 1058439]
,
name: "40-64",
stack: "Female",
data: [379788, 411217, 447201, 484739, 395533, 435485, 499861, 569114, 655066]
,
name: "65-79",
stack: "Female",
data: [97894, 113287, 128808, 137459, 152171, 170262, 191015, 210767, 226956]
,
name: "80+",
stack: "Female",
data: [16358, 18576, 24586, 30352, 36724, 42939, 46413, 54984, 66029]
,
name: "0-19",
stack: "Male",
data: [900268, 972205, 1031421, 1094547, 1155600, 1202766, 1244870, 1263637, 1268165]
,
name: "20-39",
stack: "Male",
data: [509133, 579487, 655494, 749511, 844496, 916479, 973694, 1036548, 1099507]
,
name: "40-64",
stack: "Male",
data: [364179, 401396, 440844, 479798, 390590, 430666, 495030, 564169, 646563]
,
name: "65-79",
stack: "Male",
data: [74208, 86516, 98956, 107352, 120614, 138868, 158387, 177078, 192156]
,
name: "80+",
stack: "Male",
data: [9187, 10752, 13007, 15983, 19442, 23020, 25868, 31462, 39223]
],
seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
valueAxis:
labels:
template: "#= kendo.format('0:N0', value / 1000) # M"
,
line:
visible: false
,
categoryAxis:
categories: [1970, 1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010],
majorGridLines:
visible: false
,
tooltip:
visible: true,
template: "#= series.stack #s, age #= series.name #"
);
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
【问题讨论】：
您的链接是指向 Telerik 页面，而不是小提琴。另外，请在问题中包含相关代码，这样如果小提琴随着时间的推移消失，人们仍然可以参考您的问题。 【参考方案1】：Ageonix 给出了一个很好的答案！如果不想为图表选项使用全局变量，可以从 DOM 数据属性中获取图表实例，将系列添加到图表实例中，然后告诉图表重绘：
var newseries =
name: "100+",
stack: "Female",
data: [654622, 625844, 784930, 844982, 900941, 39797, 72929, 118435, 118454]
;
//Get the chart
var chart = $("#chart").data("kendoChart");
//add the series
chart.options.series.push(newseries);
//refresh the chart
chart.redraw();
更新DOJO
【讨论】：
谢谢！！！我只能投票赞成您的答案，因为 Ageonix 也给出了正确答案。 我也赞成这个，因为它是一个很好的选择！ 如果要替换所有旧系列并只显示新系列，请添加“chart.options.series = [];”在推出新系列之前。【参考方案2】：如果将图表选项设置为全局变量，则可以修改 options.series 并将其设置为按钮单击事件中更新的系列数据源，然后再次调用 createChart()，这将更新（重新创建）图表随着更新的系列。
创建一个全局 chartOptions 变量：
var chartOptions =
title:
text: "World population by age group and sex"
,
legend:
etc. etc.
然后使用存储在变量中的选项创建图表：
$("#chart").kendoChart(chartOptions);
最后，用更新后的数据更新 options.series 并重新创建图表：
click: function()
chartOptions.series = updatedSeries;
$("#chart").kendoChart(chartOptions);
我更新了您的 Dojo 并添加了一个按钮，该按钮可在单击时填充新系列。 http://dojo.telerik.com/oTeTi/3
【讨论】：
以上是关于单击按钮即可设置 Kendo Ui 条形图系列的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI angular - 在条形图中旋转 x 轴的标签
Visual Studio 2016堆积条形图图例：更改标签标题