Question

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

我一直在指定选项：

＆＃13;

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

＆＃13;

然后在对象中包含所有选项：

$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类......

非常感谢任何帮助......

Answer 1

对于y轴，您可以通过css执行此操作，如下所示：

.nvd3 .nv-axis path {fill：＃E5E5E5;中风：＃E5E5E5; }

angular-nvd3折线图更改轴

1 个答案: