3

複数の線を持つ折れ線グラフを作成したいと考えています。ここで、目標線を点線に変換したいと思います。このような -

ここに画像の説明を入力

 $scope.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin: {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            x: function (d) { return d.x; },
            y: function (d) { return d.y; },
            useInteractiveGuideline: true,
            xScale: d3.time.scale(),
            xAxis: {
                axisLabel: 'Months',
                ticks: d3.time.months,
                tickFormat: function (d) {                    

                    return d3.time.format('%Y %b')(new Date(d));

                }
            },
            yAxis: {
                axisLabel: 'WW',
                tickFormat: function (d) {


                    if (d == null) {
                        return 0;
                    }

                    return d3.format('.02f')(d);
                },
                axisLabelDistance: 30
            }
        }
    };

これが私のjsonデータです-

 $scope.data
    = [{
        "key": "ODC", "color": "#2196f3", "values":
            [{ "x": 1409509800000, "y": 8.0 }, { "x": 1412101800000, "y": 4.2 }, { "x": 1414780200000, "y": 2.1 }, { "x": 1417372200000, "y": 0.0 }, { "x": 1420050600000, "y": 2.0 }, { "x": 1422729000000, "y": 4.4 }, { "x": 1425148200000, "y": 1.4 }, { "x": 1427826600000, "y": 2.5 }, { "x": 1430418600000, "y": 0.0 }, { "x": 1433097000000, "y": 0.0 }, { "x": 1435689000000, "y": 0.0 }, { "x": 1438367400000, "y": 0.0 }]
    }, {
        "key": "ODCTarget", "color": "#008000", "values":
            [{ "x": 1409509800000, "y": 4.0 }, { "x": 1412101800000, "y": 4.0 }, { "x": 1414780200000, "y": 4.0 }, { "x": 1417372200000, "y": 4.0 }, { "x": 1420050600000, "y": 4.0 }, { "x": 1422729000000, "y": 4.0 }, { "x": 1425148200000, "y": 4.0 }, { "x": 1427826600000, "y": 4.0 }, { "x": 1430418600000, "y": 4.0 }, { "x": 1433097000000, "y": 4.0 }, { "x": 1435689000000, "y": 4.0 }, { "x": 1438367400000, "y": 4.0 }]
    }];

これを行うのを手伝ってください。

4

1 に答える 1

10

この例はあなたを助けることができるかもしれません:

http://nvd3-community.github.io/nvd3/examples/lineChart.html

シリーズ、fe にcss クラスを追加します。dashed

{
   area: true,
   values: sin,
   key: "Sine Wave",
   color: "#ff7f0e",
   strokeWidth: 4,
   classed: 'dashed'
}

次に、 cssクラスに追加stroke-dasharrayします。dashed 

.dashed {
   stroke-dasharray: 5, 5;
}
于 2015-09-09T19:38:16.630 に答える