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

最新推荐文章于 2021-07-06 10:52:47 发布

gwcgwcjava

最新推荐文章于 2021-07-06 10:52:47 发布

阅读量2.1k

点赞数

分类专栏： KENDO

本文链接：https://blog.csdn.net/gwcgwcjava/article/details/47108115

版权

KENDO 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

gwcgwcjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kendo-使用datasource封装数据以及改变图表数据

Steped line function showValue(){ var chart2 = $("#chart").data("kendoChart"); var valueAxis = chart2.getAxis("value");
复制链接

扫一扫