【问题标题】:NetChart replaceData() displays blank. How to replace data dynamically?NetChart replaceData() 显示空白。如何动态替换数据?
【发布时间】:2021-03-30 06:52:57
【问题描述】:

我按照 zoomcharts 文档中的示例介绍了如何替换 NetChart 上的数据。 当我在图表实例上调用 replaceData() 时,什么也没发生,什么也不显示,没有错误显示。

但是当我将数据设置为预加载(如下所示)时,会出现网络。

chart = new zc.NetChart({
  data: [
     {
       preloaded: {
         nodes: [Array of nodes],
         links: [Array of links],
       },
     },
  ],
...
})

【问题讨论】:

    标签: zoomcharts


    【解决方案1】:

    当我访问“替换数据”示例的文档时,我看到了一个 JSFiddle。该示例使用“replaceData()”函数动态更改数据,它对我来说似乎工作正常。见这里:https://jsfiddle.net/egd1kj9x/

    也许您可以复制该示例并从那里开始研究该示例与您要执行的操作之间的不同之处?

    这是完整的示例:

    var randomSeed = 10; // this can be changed to generate different data sets
    function getRandomNumber() {
      var x = Math.sin(randomSeed++) * 10000;
      return x - Math.floor(x);
    }
    
    var nextNodeId = 0;
    chart = null;
    
    function buildData() {
      var nodes = [];
      var links = [];
      var i;
      var numNodes = 10;
      for (i = 0; i < numNodes; i++) {
        nodes.push({ "id": i, "loaded": true });
      }
    
      //make some random links
      for (i = 0; i < 10; i++) {
        var from = Math.floor(getRandomNumber() * numNodes);
        var to = Math.floor(getRandomNumber() * numNodes);
        links.push({ "id": i + "_" + from + "_" + to, "from": from, "to": to });
      }
    
      chart.replaceData({ "nodes": nodes, "links": links });
    }
    
    chart = new NetChart({
      style: { 
        node: { 
          display: "text",
          fillColor: "rgba(47,195,47,0.9)",
        },
        link: {
          fillColor: "rgba(86,185,247,0.4)"
        }
    
      },
      container: document.getElementById("demo"),
      area: { height: 350 }
    });
    buildData();
    var intervalHandle = setInterval(buildData, 2400);
    function disposeDemo() {
      window.clearInterval(intervalHandle);
      disposeDemo = null;
      intervalHandle = null;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-07-09
      • 1970-01-01
      • 1970-01-01
      • 2014-02-23
      • 2019-10-23
      • 1970-01-01
      • 1970-01-01
      • 2021-02-04
      相关资源
      最近更新 更多