Question

我正在使用n3-charts，它使用line-chart.min.js和d3.v2.js插件。我想隐藏x轴第0个刻度值和最后一个子刻度值。如何处理以下图片。 enter image description here

请帮助我解决这个问题，我不希望APR11和动态变化的最后一个滴答值。

app.directive('barChart', [
                       function () {

                           return {
                               restrict: 'EA',
                               template: '<linechart data="data" options="options" width="550" height="291"></linechart>',
                               scope: {
                                   range: '=',
                               },
                               link: function(scope, elements, attrs){
                                   scope.$watch("range", function () { 
                                   var values = scope.range;
                                   scope.data = values;
                                       scope.options = {
                                           yaxis  : {name: "Calories",labelalign:"-135"},
                                           stacks: [{axis: "y", series: ["firstVal", "secondVal", 'thirdVal']}],
                                           fonts:  {family: 'serif', size: '14px'},
                                           axes: {
                                               x: {key: 'x', type: 'date',labelFunction: function(x) { return d3.time.format('%b %d')(new Date(x));}},
                                               y: {key :'y',type: 'linear',min:0}
                                           },
                                           transition: {ease: 'elastic', duration: 1000, delay: 100},
                                           series: [
                                               {id: 'secondVal', y: 'secondVal', axis: 'y', color: "#b3d660", type: 'column', drawDots: true, dotSize: 4, label: 'Labe1'},
                                               {id: 'firstVal', y: 'firstVal', axis: 'y', color: "#ff8669", thickness: '2px', type: 'column', label: 'Label2'},
                                               {id: 'thirdVal', y: 'thirdVal', axis: 'y', color: "#52c4dc", type: 'column', dotSize: 2, label: 'Label3'}
                                           ],
                                           lineMode: 'linear',
                                           tension: 0.2,
                                           tooltip: {
                                               mode: 'scrubber', formatter: function (x, y, series) {
                                                   return series.label + ', ' + Math.round(y);
                                               }
                                           },
                                           drawLegend: true,
                                           drawDots: true,
                                           columnsHGap: 5
                                       }
                                   });
                               }

                           };}]);

Answer 1

对于n3-chart v2，您可以为每个轴定义一个tickFormat函数。

将一个名为tickFormat的函数添加到scope.options.axes.x，其内容如下：

tickFormat: function(value, index){
    var firstOrLast = (index === 0) || (index === scope.values.length-1);
    return firstOrLast ? "" : value;
}

不确定n3-charts v1，但我发现你已经在scope.options.axes.x中有一个名为labelFunction的函数。您可以执行与上述代码类似的操作，但您只需检查参数“x”是否与scope.values中的第一个或最后一个值匹配。

如何在n3图表中隐藏第一个孩子和最后一个孩子的刻度

1 个答案: