javascript - NVD3折线图中的虚线

Question

我想构建一个包含多条线的折线图。现在我想将我的目标线转换为虚线。像这样-

 $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 }]
    }];

请有人帮我做这件事。

Answer 1

这个例子或许能帮到你:

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

为您的系列添加 css 类，例如虚线

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

然后，将 stroke-dasharray 添加到 dashed css 类:

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