angular-nvd3折线图更改轴的颜色

Question

谁能告诉我如何为angular-nvd3 lineChart的y轴指定颜色或css类？

我一直在指定选项：

​

<nvd3 options="lineChartOptions" data="graphData" ></nvd3>

​

然后将所有选项放在一个对象中：

$scope.lineChartOptions = {
                    chart: {
                        type: 'lineChart',
                        showLegend:false,
                        forceY:[0,5], // make y axis start at 0 to 5
                        forceX:[1,4],
                        // interpolate:"monotone",
                        height: 400,
                        width: 600,
                        margin : {
                            top: 20,
                            right: 20,
                            bottom: 40,
                            left: 55
                        },
                        x: function(d){ return d.x; },
                        y: function(d){ return d.y; },
                        useInteractiveGuideline: true,
                        tooltip: {
                          contentGenerator: function(d) { return '<h3>HELLO WORLD</h3>'; }
                        },
                        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: 'Week',
                            ticks: 4, // make  x-axis show all 4 weeks,

                            // tickFormat: function(d){
                            //  return "week " + d;
                            // }
                        },
                        showYAxis: true,
                        yAxis: {
                            // axisLabel: 'Score',
                            // tickFormat: function(d){
                            //     return d3.format('.02f')(d);
                            // },
                            ticks: 6,
                            axisLabelDistance: -10
                        },
                        callback: function(chart){
                            //console.log("!!! lineChart callback !!!");
                        }
                    },
                    // title: {
                    //     enable: true,
                    //     text: 'Title for Line Chart'
                    // },
                    // subtitle: {
                    //     enable: true,
                    //     text: 'Subtitle for simple line chart... ',
                    //     css: {
                    //         'text-align': 'center',
                    //         'margin': '10px 13px 0px 7px'
                    //     }
                    // },
                    // caption: {
                    //     enable: true,
                    //     html: '<b>AND</b>  we can put any sort of html here too...',
                    //     css: {
                    //         'text-align': 'justify',
                    //         'margin': '10px 13px 0px 7px'
                    //     }
                    // }
                };

但是我怎么也搞不懂如何为轴指定颜色，或者如何为tick文本指定css类……

任何帮助都将不胜感激。

Answer 1

对于y轴，您可以使用css完成此操作，如下所示：

填充.nv轴路径{ .nvd3：#E5E5E5；笔划：#E5E5E5；}