[英]Kendoui bar chart set series on click of a button
我正在使用KendoUI條形圖。 請檢查這個小提琴 。 在這個小提琴中,我在設計時設置series
配置。 我想在運行時通過單擊按鈕向圖表添加series
。 如何在單擊按鈕時將series
添加到kendo圖表。
目前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>
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
如果將圖表選項設置為全局變量,則可以修改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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.