Question

我使用带有angularjs的cmaurer nvd3指令，你可以看到它here

我想将x轴刻度计数更改为3（开始，中间，结束日期），但是nvd3刻度属性（xaxisticks，xaxistickvalues）不起作用。

我甚至尝试使用unix时间戳，但没有成功。有什么想法吗？

        <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>

Answer 1

不是一个完美的解决方案，但它是一个快速更改，可以消除大部分重复。在创建时添加刻度的缓存，并且因为它们是按顺序创建的，所以可以消除连续的欺骗。

    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
                }

            }
        };

Answer 2

似乎nvd3中的所有折线图都有硬编码的刻度线，因此任何刻度设置都会被忽略：

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

见这里：https://github.com/novus/nvd3/issues/70。可悲的是，似乎让它工作需要分叉库，或者等到版本2.0发布，希望能解决这个问题。

angularjs-nvd3-directives折线图滴答不起作用

2 个答案: