kendo-使用datasource封装数据以及改变图表数据

来源：互联网发布：我国机电产品出口数据编辑：程序博客网时间：2024/06/16 20:30
<!DOCTYPE html><html><head>    <title>Steped line</title>    <meta charset="utf-8">    <link href="../kendoui/examples/content/shared/styles/examples-offline.css" rel="stylesheet">    <link href="../kendoui/styles/kendo.common.min.css" rel="stylesheet">    <link href="../kendoui/styles/kendo.rtl.min.css" rel="stylesheet">    <link href="../kendoui/styles/kendo.default.min.css" rel="stylesheet">    <link href="../kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">    <link href="../kendoui/styles/kendo.dataviz.default.min.css" rel="stylesheet">    <script src="../kendoui/js/jquery.min.js"></script>    <script src="../kendoui/js/angular.min.js"></script>    <script src="../kendoui/js/kendo.all.min.js"></script>    <script src="../kendoui/examples/content/shared/js/console.js"></script>    <script>        function showValue(){var chart2 = $("#chart").data("kendoChart");  var valueAxis = chart2.getAxis("value");alert(valueAxis);var categoryAxis = chart2.getAxis("category");alert(categoryAxis);}function changeValue(){var chart = $("#chart").data("kendoChart");//alert(chart);var newData = new kendo.data.DataSource({data:[{"value1":30,"value2":15},{"value1":33,"value2":12},{"value1":33,"value2":34},{"value1":33,"value2":22},{"value1":23,"value2":22},{"value1":33,"value2":34},{"value1":30,"value2":22},{"value1":20,"value2":41},{"value1":20,"value2":23},{"value1":20,"value2":32},{"value1":20,"value2":25},{"value1":20,"value2":13},{"value1":20,"value2":23},{"value1":20,},{"value1":20,},]});chart.setDataSource(newData);}    </script>        </head><body>            <a class="offline-button" href="../index.html">Back</a>        <div id="example">    <div class="demo-section k-content">        <div id="chart"></div>    </div> <a class="offline-button" href="#" onClick="showValue()">获得值</a>  <a class="offline-button" href="#" onClick="changeValue()">改变实际值</a>    <script>//数据var datas = [{"value1":20,"value2":15},{"value1":23,"value2":12},{"value1":23,"value2":34},{"value1":23,"value2":12},{"value1":23,"value2":12},{"value1":23,"value2":34},{"value1":20,"value2":22},{"value1":20,"value2":11},{"value1":20,"value2":33},{"value1":20,"value2":12},{"value1":20,"value2":15},{"value1":20,"value2":13},{"value1":20,},{"value1":20,},{"value1":20,},];        function createChart() {            $("#chart").kendoChart({<span style="background-color: rgb(255, 255, 153);">dataSource:{data:datas},</span>                title: {                    text: "光伏系统态势图"                },//图例位置                legend: {                    position: "bottom"                },                series: [{                    type: "line",name:"实际值",                    //data: [20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5],<span style="background-color: rgb(255, 255, 153);">field:"value2",</span>                    style: "step",                    markers: {//控制线条上默认节点上的小圆圈显不显示                        visible: true                    },//控制线条是否显示visible:true},{                    type: "line",name:"短期预测值",                    //data: [23, 27, 27, 27, 27, 27, 27, 27,27, 27, 27, 27, 27, 27, 27,27],<span style="background-color: rgb(255, 255, 153);">field:"value1",</span>                    style: "step",                    markers: {                        visible: false                    }}],              //Y轴的设置valueAxis: {//Y轴的显示样式name:"KW",                    labels: {                        format: "{0}KW"                    },                    line: {                        visible: false                    },                    min:0,max:50,                },//横轴的设置                categoryAxis: {                    categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],                    majorGridLines: {                        visible: false                    }                },//鼠标放上去的显示样式                tooltip: {                    visible: true,                    format: "{0}KW",                    template: "预测 :${category}:00<br><hr> 总负荷<br> #= series.name #: #= value #KW"},            });        }        $(document).ready(createChart);        $(document).bind("kendo:skinChange", createChart);    </script></div>        </body></html>
0 0