Kendoui гистограмма комплект серия щелкнув по кнопке

Я работаю с гистограммой KendoUI. Пожалуйста, проверьте это fiddle. В этой скрипте я устанавливаю series config во время разработки. Я хочу добавить series в график во время выполнения щелчка по кнопке. Как я могу добавить series в график кендо по нажатию кнопки.Kendoui гистограмма комплект серия щелкнув по кнопке

В настоящее время 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>

источник

2016-02-25 SharpCoder

Ваша ссылка на страницу telerik, а не скрипку. Кроме того, пожалуйста, укажите соответствующий код в вопросе, поэтому, если скрипка исчезнет с течением времени, люди все равно могут обратиться к вашему вопросу. – ezanker

@ezanker: сделано !! – SharpCoder

Если задать параметры диаграммы в качестве глобальной переменной, вы можете изменить 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); 
}

Я обновил ваше Доджо и добавил кнопку, которая населяет новая серия по щелчку. http://dojo.telerik.com/oTeTi/3

источник

2016-02-26 03:36:38 Ageonix

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

Updated DOJO

источник

2016-02-26 14:33:16 ezanker

Спасибо !!! Я могу только проголосовать за ваш ответ, поскольку Ageonix также дал правильный ответ. – SharpCoder

Я тоже занимаюсь этим, потому что это отличная альтернатива! – Ageonix

@SharpCoder, добро пожаловать. – ezanker

Kendoui гистограмма комплект серия щелкнув по кнопке

ответ

Смежные вопросы