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



有人能告诉我如何为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'
                    //     }
                    // }
                };

但我一辈子都不知道如何为轴指定颜色,或者如何为勾号文本指定css类。。。

任何帮助都将不胜感激。。。

对于y轴,您可以通过css来完成,如下所示:

.nvd3.nv轴路径{填充:#E5E5E5;笔划:#E5E6E5;}

最新更新