通常のグラフまたはD3Jをノード赤いダッシュボードに表示

Question

誰かがtimeseries（ダッシュボードのチャートのような）ではなく、データを渡してチャートを表示することはすでに達成していますか？

これを行うにはテンプレートを使用するのはおそらく可能でしょうか？しかし、私はどのようにそれを行うには手がかりがありません。誰かが小さな例を持っているなら、それはすばらしいでしょう。

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>