пунктирная линия на линейной диаграмме NVD3

Я хочу построить линейную диаграмму, которая будет иметь несколько строк. Теперь я хочу преобразовать мою целевую линию в пунктирную линию. Как это -

введите здесь описание изображения

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

Пожалуйста, помогите мне сделать это.


javascript angularjs nvd3.js angular-nvd3
person Gulrej    schedule 09.09.2015    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Этот пример может помочь вам:

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

Добавьте в свою серию класс CSS, например. dashed

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

Затем добавьте stroke-dasharray в класс dashed css:

.dashed {
   stroke-dasharray: 5, 5;
}
person James McShane    schedule 09.09.2015
comment
Я проверил это немного больше. Важно только то, что стиль stroke-dasharray относится к элементу nv-group dom, определяющему линию. - person James McShane; 09.09.2015
comment
Обычная .dashed также повлияет на круг, который появляется при наведении курсора. В итоге я использовал .dashed .nv-line, чтобы получить пунктирную линию, но сохранить все круги нетронутыми. - person jsruok; 09.07.2018