0

我有一个气泡图，并使用带有 getData() 方法的 ajax 读取数据。第一次没问题，但我想在 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);        
    });
4

1 回答 1

0

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>

于 2021-04-13T14:49:31.637 回答