node.js - 在 Node-red 仪表板中显示普通图表或 D3J(通过模板？)

Question

是否有人已经实现了显示图表，不是基于时间序列(如仪表板中的图表)，而是基于传递给它的数据？

我想知道是否可以使用模板来做到这一点？但我不知道该怎么做。如果有人有一个小例子，那就太好了。

Answer 1

我找到了一个解决方案，使用库中的一些代码示例...msg.payload和数据之间的链接仍然缺失，但并不遥远

<style>

#chart svg {
  width: 800px;
  height: 600px;
}

</style>

<h3>test</h3>
<div id="chart">
  <svg></svg>
</div>



<script src="https://raw.githubusercontent.com/novus/nvd3/master/build/nv.d3.js"></script>

<script>
    (function(scope) {
        console.log('Position 1');
        console.dir(scope);
        console.log(scope.msg);
        scope.$watch('msg.payload', function(data) {
            console.log('Position 2');
            console.dir(data);
        });
    })(scope);

function data() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: 'normal',
      color: '#ff7f0e'
    },
    {
      values: cos,
      key: 'defect',
      color: '#2ca02c'
    }
  ];
}

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;

  chart.xAxis
    .axisLabel('frequence')
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis
    .axisLabel('amplitude')
    .tickFormat(d3.format('.02f'))
    ;

  d3.select('#chart svg')
    .datum(data())
    .transition().duration(500)
    .call(chart)
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});
</script>