Kendo UI for jQuery数据管理使用教程：Spreadsheet – 将图表绑定到工作表数据

图表在发生更改事件时在工作表上更新。

<style>#spreadsheet, #chart {height: 500px;float: left;}#spreadsheet {width: 350px;}#chart {width: 550px;}</style><div id="spreadsheet"></div><div id="chart"></div><script>$("#spreadsheet").kendoSpreadsheet({toolbar: false,sheetsbar: false});$("#chart").kendoChart({dataSource: {// Produce series for each regiongroup: {field: "Region",dir: "asc"}},series: [{// Notice the syntax for fields// that are not valid JS identifiersfield: "['GDP Growth']",categoryField: "Year",type: "column"}],dataBound: function(e) {// Sort categories (years) as groupingvar axis = e.sender.options.categoryAxis;if (axis.categories) {axis.categories.sort();}},valueAxis: {labels: {// Percentsformat: "P"}},legend: {position: "bottom"},transitions: false});var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");var chart = $("#chart").data("kendoChart");var sheet = spreadsheet.sheetByIndex(0);var range = sheet.range("A1:C100");// Implementation belowpopulateData(sheet);bindChart(chart, sheet, range);function bindChart(chart, sheet, range) {// Change will fire when the sheet data changes// https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet/events/changesheet.bind("change", function(e) {if (e.recalc) {update();}});// Populate chart immediatelyupdate();function update() {chart.dataSource.data(fetchData());}function fetchData() {var values = range.values();var headers = [];var data = [];// Iterate range rows and cells and extract datafor (var row = 0; row < values.length; row++) {var dataItem = {};for(var cell = 0; cell < values[row].length; cell++) {var value = values[row][cell];if (!value) {continue;}if (row > 0) {// Data celldataItem[headers[cell]] = value;} else {// Header cellheaders.push(value);}}// Make sure we have all required fieldsif (row > 0 && dataItem.Year && dataItem.Region) {data.push(dataItem);}}return data;}}function populateData(sheet) {sheet.fromJSON({"rows": [{"index": 29,"height": 20.078125,"cells": [{"value": 2009,"index": 0},{"value": "India","index": 1},{"value": 0.08238,"format": "0.00%","index": 2}]},{"index": 40,"height": 20.078125,"cells": [{"value": 2011,"index": 0},{"value": "World","index": 1},{"value": 0.02727,"format": "0.00%","index": 2}]},{"index": 0,"cells": [{"value": "Year","bold": true,"textAlign": "center","index": 0},{"value": "Region","bold": true,"textAlign": "center","index": 1},{"value": "GDP Growth","bold": true,"textAlign": "center","index": 2}]},{"index": 1,"cells": [{"value": 2002,"index": 0},{"value": "India","index": 1},{"value": 0.0391,"format": "0.00%","index": 2}]},{"index": 2,"cells": [{"value": 2002,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.04743,"format": "0.00%","index": 2}]},{"index": 3,"cells": [{"value": 2002,"index": 0},{"value": "Germany","index": 1},{"value": 0.0001,"format": "0.00%","index": 2}]},{"index": 4,"cells": [{"value": 2002,"index": 0},{"value": "World","index": 1},{"value": 0.01988,"format": "0.00%","index": 2}]},{"index": 5,"cells": [{"value": 2003,"index": 0},{"value": "India","index": 1},{"value": 0.0794,"format": "0.00%","index": 2}]},{"index": 6,"cells": [{"value": 2003,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.07295,"format": "0.00%","index": 2}]},{"index": 7,"cells": [{"value": 2003,"index": 0},{"value": "Germany","index": 1},{"value": -0.00375,"format": "0.00%","index": 2}]},{"index": 8,"cells": [{"value": 2003,"index": 0},{"value": "World","index": 1},{"value": 0.02733,"format": "0.00%","index": 2}]},{"index": 9,"cells": [{"value": 2004,"index": 0},{"value": "India","index": 1},{"value": 0.07848,"format": "0.00%","index": 2}]},{"index": 10,"cells": [{"value": 2004,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.07175,"format": "0.00%","index": 2}]},{"index": 11,"cells": [{"value": 2004,"index": 0},{"value": "Germany","index": 1},{"value": 0.01161,"format": "0.00%","index": 2}]},{"index": 12,"cells": [{"value": 2004,"index": 0},{"value": "World","index": 1},{"value": 0.03994,"format": "0.00%","index": 2}]},{"index": 13,"cells": [{"value": 2005,"index": 0},{"value": "India","index": 1},{"value": 0.09284,"format": "0.00%","index": 2}]},{"index": 14,"cells": [{"value": 2005,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.06376,"format": "0.00%","index": 2}]},{"index": 15,"cells": [{"value": 2005,"index": 0},{"value": "Germany","index": 1},{"value": 0.00684,"format": "0.00%","index": 2}]},{"index": 16,"cells": [{"value": 2005,"index": 0},{"value": "World","index": 1},{"value": 0.03464,"format": "0.00%","index": 2}]},{"index": 17,"cells": [{"value": 2006,"index": 0},{"value": "India","index": 1},{"value": 0.09263,"format": "0.00%","index": 2}]},{"index": 18,"cells": [{"value": 2006,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.08153,"format": "0.00%","index": 2}]},{"index": 19,"cells": [{"value": 2006,"index": 0},{"value": "Germany","index": 1},{"value": 0.037,"format": "0.00%","index": 2}]},{"index": 20,"cells": [{"value": 2006,"index": 0},{"value": "World","index": 1},{"value": 0.04001,"format": "0.00%","index": 2}]},{"index": 21,"cells": [{"value": 2007,"index": 0},{"value": "India","index": 1},{"value": 0.09801,"format": "0.00%","index": 2}]},{"index": 22,"cells": [{"value": 2007,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.08535,"format": "0.00%","index": 2}]},{"index": 23,"cells": [{"value": 2007,"index": 0},{"value": "Germany","index": 1},{"value": 0.03269,"format": "0.00%","index": 2}]},{"index": 24,"cells": [{"value": 2007,"index": 0},{"value": "World","index": 1},{"value": 0.03939,"format": "0.00%","index": 2}]},{"index": 25,"cells": [{"value": 2008,"index": 0},{"value": "India","index": 1},{"value": 0.0389,"format": "0.00%","index": 2}]},{"index": 26,"cells": [{"value": 2008,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.05247,"format": "0.00%","index": 2}]},{"index": 27,"cells": [{"value": 2008,"index": 0},{"value": "Germany","index": 1},{"value": 0.01083,"format": "0.00%","index": 2}]},{"index": 28,"cells": [{"value": 2008,"wrap": true,"index": 0},{"value": "World","index": 1},{"value": 0.01333,"format": "0.00%","index": 2}]},{"index": 30,"cells": [{"value": 2009,"index": 0},{"value": "Russian Federation","index": 1},{"value": -0.07832,"format": "0.00%","index": 2}]},{"index": 31,"cells": [{"value": 2009,"index": 0},{"value": "Germany","index": 1},{"value": -0.05127,"format": "0.00%","index": 2}]},{"index": 32,"cells": [{"value": 2009,"index": 0},{"value": "World","index": 1},{"value": -0.02245,"format": "0.00%","index": 2}]},{"index": 33,"cells": [{"value": 2010,"index": 0},{"value": "India","index": 1},{"value": 0.09552,"format": "0.00%","index": 2}]},{"index": 34,"cells": [{"value": 2010,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.043,"format": "0.00%","index": 2}]},{"index": 35,"cells": [{"value": 2010,"index": 0},{"value": "Germany","index": 1},{"value": 0.0369,"format": "0.00%","index": 2}]},{"index": 36,"cells": [{"value": 2010,"index": 0},{"value": "World","index": 1},{"value": 0.04339,"format": "0.00%","index": 2}]},{"index": 37,"cells": [{"value": 2011,"index": 0},{"value": "India","index": 1},{"value": 0.06855,"format": "0.00%","index": 2}]},{"index": 38,"cells": [{"value": 2011,"index": 0},{"value": "Russian Federation","index": 1},{"value": 0.043,"format": "0.00%","index": 2}]},{"index": 39,"cells": [{"value": 2011,"index": 0},{"value": "Germany","index": 1},{"value": 0.02995,"format": "0.00%","index": 2}]}],"columns": [{"index": 1,"width": 122},{"index": 2,"width": 103}]});}</script>

Kendo UI for jQuery | 下载试用

Kendo UI for jQuery是完整的jQuery UI组件库，可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切，从多个UI组件中选择，并轻松地将它们组合起来，创建出酷炫响应式的应用程序，同时将开发时间加快了50%。