【问题标题】:Zing feed plotting multiple series in 1 chartZing feed 在 1 个图表中绘制多个系列
【发布时间】:2015-05-04 11:21:50
【问题描述】:

我正在尝试在 ZingChart 提要中绘制 2 行系列数据。 下面是我的脚本代码。

<script>
var chartData = {
    "type":"line",
    "refresh": {
        "type": "feed",
        "transport": "js",
        "url": "feed()",
        "interval": 1000
    },
    "series":[
        {
            "values":[]

        },
        {
            "values":[]
        }
    ]
};



window.onload = function() {
    zingchart.render({
        id: "chartDiv",
        data: chartData,
        height: 600,
        width: "100%"
    });
};

window.feed = function(callback) {
    $.ajax({
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json",
            "Access-Control-Allow-Origin": "*"
        },
        url: "/PerformanceMonitor/showProcessUsage/${processName}",
        success: function (data) {
            var mem = data.mem.size/100000;
            var tick = {
                plot0: parseInt(mem)
                                };
            callback(JSON.stringify(tick));
            var tick2 = {
                    plot1:parseInt(mem/1000)
            };
            callback(JSON.stringify(tick2));
        }
    });
};

它被显示,但失去了图形的线条性质。这是正确的方法吗?有更好的方法吗?稍后我打算让用户决定在运行时图表中允许多少个图。ZingChart 中是否有我可以使用的东西? 提前致谢。

【问题讨论】:

    标签: javascript ajax zingchart


    【解决方案1】:

    tick 对象包含绘图的每个系列的数据。这意味着您可以向该对象添加多个绘图。

    您可以使用以下代码替换 success 回调中的所有内容...

    var mem = data.mem.size/100000;
    var tick = {
        plot0: parseInt(mem),
        plot1: parseInt(mem/1000)
    };
    callback(JSON.stringify(tick));
    

    如果您想为该系列添加第三个绘图,您只需添加一个plot2 属性(因为 ZingChart 的系列具有从 0 开始的索引)。

    我是 ZingChart 团队的一员。如果您还有其他问题,请告诉我。

    【讨论】:

    • 谢谢 :) 它工作正常。我现在想让用户即时决定添加/删除情节系列。你能指出我应该在哪里寻找这个吗?以及如何实现?
    • 由于我们刚刚使用plot1tick 对象添加了另一个绘图,因此您可以使用plot2plot3 等以相同的方式添加更多绘图。您可以看到一个演示在zingchart.com/features/real-time-data-charts
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-27
    • 1970-01-01
    • 2021-11-21
    • 2019-05-04
    相关资源
    最近更新 更多