是否可以向 Kendo UI 气泡图的系列添加新的传入数据？
Is it possible to add new incoming data to series for Kendo UI Bubble Chart?
我有一个气泡图并使用 ajax 和 getData() 方法读取数据。第一次没问题，但我想在 setInterval 方法中向图表添加新的传入数据。有 chart.dataSource.add(dataSource1) 添加数据的方法，但它对我不起作用。我想更新 series[0] 数据并且只添加新的数据而不刷新所有数据。可能吗？
function create(){
var config = {
chartArea: {
width: 550,
height: 370
},
seriesDefaults: {
rangeArea: {
color: "red",
opacity: 0.2
}
},
series: [{
type: "bubble",
data: getData(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
{
type: "bubble",
data: getData2(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
],
yAxis: {
name: "yAxis",
},
xAxis: {
name: "xAxis",
reverse: true,
min: roundMinutes(new Date().addHours(-2)),
max: roundMinutes(new Date().addHours(2)),
plotBands: plotData,
labels: {
template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
},
baseUnit: "hours",
majorUnit: 1
}
};
$("#chart").kendoChart(config);
}
$(document).ready(function () {
createChart();
setInterval(function () {
createChart();
}, 60000);
});
chart.dataSource.add() 工作正常。这是一个例子。在 DOJO 中试试这个。这是基于 Telerik 的例子。它每隔几秒添加一个气泡而不刷新数据。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
dataSource: {
data: jobGrowth
},
series: [{
type: "bubble",
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
}, 2000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
}, 4000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
}, 6000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>
好的。这是另一个例子。这次数据绑定到系列。此示例仅显示一个系列，但这应该让您了解如何满足您的要求。结果与上面相同，但这次它没有使用 DataSource 实例。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
series: [{
type: "bubble",
data: jobGrowth,
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
jobGrowth.push(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
bubbleChart.redraw();
}, 2000);
setTimeout(function() {
jobGrowth.push(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
bubbleChart.redraw();
}, 4000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
bubbleChart.redraw();
}, 6000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
bubbleChart.redraw();
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>
我有一个气泡图并使用 ajax 和 getData() 方法读取数据。第一次没问题，但我想在 setInterval 方法中向图表添加新的传入数据。有 chart.dataSource.add(dataSource1) 添加数据的方法，但它对我不起作用。我想更新 series[0] 数据并且只添加新的数据而不刷新所有数据。可能吗？
function create(){
var config = {
chartArea: {
width: 550,
height: 370
},
seriesDefaults: {
rangeArea: {
color: "red",
opacity: 0.2
}
},
series: [{
type: "bubble",
data: getData(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
{
type: "bubble",
data: getData2(),
name: "Sales",
xField: "CreateDateTime",
yField: "CategoryId",
sizeField: "sizeField",
categoryField: "Tooltip",
opacity: 0.5,
maxSize: 5,
border: {
width: 2,
},
}
],
yAxis: {
name: "yAxis",
},
xAxis: {
name: "xAxis",
reverse: true,
min: roundMinutes(new Date().addHours(-2)),
max: roundMinutes(new Date().addHours(2)),
plotBands: plotData,
labels: {
template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
},
baseUnit: "hours",
majorUnit: 1
}
};
$("#chart").kendoChart(config);
}
$(document).ready(function () {
createChart();
setInterval(function () {
createChart();
}, 60000);
});
chart.dataSource.add() 工作正常。这是一个例子。在 DOJO 中试试这个。这是基于 Telerik 的例子。它每隔几秒添加一个气泡而不刷新数据。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
dataSource: {
data: jobGrowth
},
series: [{
type: "bubble",
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
}, 2000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
}, 4000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
}, 6000);
setTimeout(function() {
bubbleChart.dataSource.add(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>
好的。这是另一个例子。这次数据绑定到系列。此示例仅显示一个系列，但这应该让您了解如何满足您的要求。结果与上面相同，但这次它没有使用 DataSource 实例。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bubble-charts/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<script>
$(document).ready(function() {
var jobGrowth = [{
growth: -2500,
jobs: 50000,
applications: 500000,
company: "Microsoft"
}, {
growth: 7000,
jobs: 19000,
applications: 700000,
company: "Google"
}, {
growth: 2450,
jobs: 34000,
applications: 90000,
company: "Cisco"
}, {
growth: 500,
jobs: 110000,
applications: 7600000,
company: "Starbucks"
}, {
growth: 1400,
jobs: 150000,
applications: 700000,
company: "Publix Super Markets"
} ];
var bubbleChart = $("#chart").kendoChart({
transitions: false,
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
series: [{
type: "bubble",
data: jobGrowth,
xField: "growth",
yField: "jobs",
sizeField: "applications",
categoryField: "company"
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
jobGrowth.push(
{
growth: 2900,
jobs: 40000,
applications: 450000,
company: "Deloitte"
});
bubbleChart.redraw();
}, 2000);
setTimeout(function() {
jobGrowth.push(
{
growth: 3000,
jobs: 55000,
applications: 900000,
company: "Whole Foods Market"
});
bubbleChart.redraw();
}, 4000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2400,
jobs: 30000,
applications: 300000,
company: "PricewaterhouseCoopers"
});
bubbleChart.redraw();
}, 6000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2700,
jobs: 34000,
applications: 400000,
company: "Accenture"
});
bubbleChart.redraw();
}, 8000);
});
</script>
<style>
.demo-section {
position: relative;
}
.demo-section ul {
font-size: 11px;
margin: 63px 30px 0 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
text-transform: uppercase;
width: 146px;
height: 94px;
}
</style>
</div>
</body>
</html>