个人中心
gpt4 book ai didi

javascript - 单击按钮即可设置 Kendo Ui 条形图系列

转载 作者：行者123 更新时间：2023-12-04 20:01:29 25 4
gpt4 key购买 nike

我正在使用 KendoUI 条形图。请查看 fiddle .在这个 fiddle 中，我在设计时设置 series 配置。我想在运行时通过单击按钮将 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>

最佳答案

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

关于javascript - 单击按钮即可设置 Kendo Ui 条形图系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35632849/

25 4 0
文章推荐： kubernetes - 如何使用 Google Compute Engine Instances 设置 Tensorflow 集群来训练模型？
文章推荐： index.php 的 .htaccess 重定向打破了 404 页面
文章推荐： .htaccess - 将 ExpiresByType 添加到 .htaccess 但 PageSpeed Insights 仍然声明我应该 "Leverage Browser Caching"
文章推荐： modal-dialog - Foundation 5 - 显示模态的顶部位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com