angularjs-nvd3-directives line chart ticks doesn't work

问题

I work with cmaurer nvd3 directives with angularjs and you can see it here

I want to change the x-axis ticks count to 3 (start, middle, end dates), but nvd3 ticks properties(xaxisticks, xaxistickvalues) don't work.

I even tried to use unix timestamp, but no success. Have any thoughts?

        <nvd3-line-chart
            ...
            xAxisTickFormat="xAxisTickFormatFunction()"
            yAxisTickFormat="yAxisTickFormatFunction()"
            xaxistickvalues="xAxisTickValuesFunction()" // not work
            xaxisticks="3" // not work
            showXAxis="true"
            showYAxis="true"
            interactive="true"
            ...
            forcey="[]"
            >
            <svg></svg>
        </nvd3-line-chart>

回答1:

Not a perfect solution, but was a quick change that removes duplication for the most part. Add a cache of the ticks as they are created, and since they are create in order, can eliminate sequential dupes.

    controller: function($scope) {
        var vm = this;

        vm.xAxisTick = "";   // <- cache the x-axis ticks here...
        vm.x2AxisTick = "";  // <- cache the x2-axis ticks here...

        vm.options = {
            chart: {
                type: 'lineWithFocusChart',

                xAxis: {
                    scale: d3.time.scale(),
                    tickFormat: function(d) {
                        var tick = moment.unix(d).format('h:mm a');

                        // compare tick versus the last one,
                        // return empty string if match
                        if (vm.xAxisTick === tick) {
                            return "";
                        }

                        // update our latest tick, and pass along to the chart
                        vm.xAxisTick = tick;
                        return tick;
                    },
                    rotateLabels: 30,
                    showMaxMin: false
                },

                x2Axis: {
                    scale: d3.time.scale(),
                    tickFormat: function(d) {
                        var tick = moment.unix(d).format('h:mm a');

                        // compare tick versus the last one,
                        // return empty string if match
                        if (vm.x2AxisTick === tick) {
                            return "";
                        }

                        // update our latest tick, and pass along to the chart
                        vm.x2AxisTick = tick;
                        return tick;
                    },
                    rotateLabels: 30,
                    showMaxMin: false                    
                },

                yAxis: {
                    axisLabel: 'Why',
                    axisLabelDistance: 30,
                    rotateYLabel: false
                }

            }
        };

回答2:

It seems all line charts in nvd3 have the ticks hardcoded, so any ticks setting gets ignored:

    xAxis
      .scale(x)
      .ticks( availableWidth / 100 )
      .tickSize(-availableHeight, 0);

See here: https://github.com/novus/nvd3/issues/70. Sadly it seems to get it working one needs to fork the library, or wait until version 2.0 is released, hopefully solving this among other bugs.

来源：https://stackoverflow.com/questions/26133507/angularjs-nvd3-directives-line-chart-ticks-doesnt-work