angularjs-nvd3，指令线图蜱不起作用(angularjs-nvd3-directives

我与angularjs cmaurer nvd3指令工作，你可以看到它在这里

我想改变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 line chart ticks doesn't work