2

次のように、特定の期間の時間範囲でゲストの数をカウントするカスタム折れ線グラフ表示を作成するために、angular-nvd3 ディレクティブを使用しています。

  1. 現在の時間 - 2 --> 現在の時間:直線として表示されます
  2. 現在時刻 --> 現在時刻 + 2 :点線で表示されます。

直線のみを使用した実装コードは次のとおりです。

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                tooltips: false,
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: false,
                dispatch: {
                    stateChange: function(e){ console.log("stateChange"); },
                    changeState: function(e){ console.log("changeState"); },
                    tooltipShow: function(e){ console.log("tooltipShow"); },
                    tooltipHide: function(e){ console.log("tooltipHide"); }
                },
                xAxis: {
                    axisLabel: 'Time (ms)'
                },
                yAxis: {
                    axisLabel: 'Voltage (v)',
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    axisLabelDistance: 30
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                }
            },
            title: {
                enable: true,
                text: 'Title for Line Chart'
            }
            
        };

        $scope.data = sinAndCos();

        /*Random Data Generator */
        function sinAndCos() {
            var sin = [],sin2 = [],
                cos = [];

            //Data is represented as an array of {x,y} pairs.
            for (var i = 0; i < 100; i++) {
                sin.push({x: i, y: Math.sin(i/10)});
                sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
                cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
            }

            //Line chart data should be sent as an array of series objects.
            return [
                {
                    values: [{x:7,y:100},{x:8,y:40},{x:9,y:70}],      
                    key: 'Sine Wave', //key  - the name of the series.
                    color: '#ff7f0e',  //color - optional: choose your own line color.
                    strokeWidth: 2    
                },
                {
                
                    values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
                    key: 'Cosine Wave',
                    color: '#2ca02c'
                },
                {
                    values: [{x:7,y:300},{x:8,y:240},{x:9,y:270},{x:10,y:220},{x:11,y:280}],
                    key: 'Another sine wave',
                    color: '#7777ff'    
                }
            ];
        };
});

これがプランカーです: http://plnkr.co/edit/lBKFld?p=preview

誰でも、私の大きな感謝を得る助けを提供できます。

ありがとう

4

1 に答える 1

0 

            

{
            
                values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
                key: 'Cosine Wave',
                color: '#2ca02c',
                classed: 'dashed'  // <-- Now use CSS to make the line dashed
            }

STYLE!!!

.dashed {
            stroke-dasharray: 5,5;
        }

于 2016-02-18T11:46:00.197 に答える