angularjs-nvd3-directives折线图刻度不起作用 [英] angularjs-nvd3-directives line chart ticks doesn't work

问题描述

我在angulara中使用cmaurer nvd3指令，您可以在此处

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

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

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

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

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>

推荐答案

这不是一个完美的解决方案，但它是一项快速更改，可以在很大程度上消除重复.在刻度线创建时添加它们的缓存，由于它们是按顺序创建的，因此可以消除顺序重复.

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
                }

            }
        };

这篇关于angularjs-nvd3-directives折线图刻度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！