如何解决是否可以将新的传入数据添加到 Kendo UI 气泡图的系列中？
我有一个气泡图，并使用 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(),}
],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,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,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,data: jobGrowth,opacity: 1
}
}).data("kendoChart");
setTimeout(function() {
jobGrowth.push(
{
growth: 2900,company: "Deloitte"
});
bubbleChart.redraw();
},2000);
setTimeout(function() {
jobGrowth.push(
{
growth: 3000,company: "Whole Foods Market"
});
bubbleChart.redraw();
},4000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2400,company: "PricewaterhouseCoopers"
});
bubbleChart.redraw();
},6000);
setTimeout(function() {
jobGrowth.push(
{
growth: 2700,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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
