Question

我正在尝试使用焦点选项（focusEnable，focusHeight等）修改linewithFocusChart的焦点属性（焦点是主图表下方的小导航视口）。但是这些选项对我的图表没有任何影响。我正在使用Angular-nvD3指令。有什么想法吗？

HTML

<nvd3 options="options" data="data" config="config"></nvd3>

角度控制器

$scope.options = {
        chart: {
            type: 'lineWithFocusChart',
            height: 350,
            margin : {
                "top": 20,
                  "right": 40,
                  "bottom": 60,
                  "left": 40
            },
            focusEnable:true,
            focusHeight: 80,
            focusShowAxisX: true,
            focusShowAxisY: false,
            brushExtent: [new Date(1427846400000), new Date(1435708800000)],
            xAxis: {
                axisLabel: '',
                tickFormat: function(d){
                    return  d3.time.format('%b-%Y')(
                                            new Date(d))
                }
            },
            x2Axis: {
                tickFormat: function(d){
                    return  d3.time.format('%b/%Y')(
                                            new Date(d))
                }
            },
            yAxis: {
                axisLabel: '',
                tickFormat: function(d){
                    return d3.format(',d')(d);
                },
                rotateYLabel: false
            },
            y2Axis: {
                tickFormat: function(d){
                    return d3.format(',')(d);
                }
            },
            tooltip: {
                distance: 0,
                duration: 100,
                hideDelay: 100
            },
            tooltipContent: function (key, x, y, e) {
                return '<h3>' + e.point.y + '</h3>' +
                    '<p>' + x + '</p>';
            }
        }
    };

Answer 1

快速查看source code，您正在寻找的选项是focusHeight。

{
  "chart": {
    "type": "linePlusBarChart",
    "height": 500,
    "margin": {
      "top": 30,
      "right": 75,
      "bottom": 50,
      "left": 75
    },
    "bars": {
      "forceY": [
        0
      ]
    },
    "bars2": {
      "forceY": [
        0
      ]
    },
    "color": [
      "#2ca02c",
      "darkred"
    ],
    "xAxis": {
      "axisLabel": "X Axis"
    },
    "x2Axis": {
      "showMaxMin": false
    },
    "y1Axis": {
      "axisLabel": "Y1 Axis"
    },
    "y2Axis": {
      "axisLabel": "Y2 Axis"
    },
    "y3Axis": {},
    "y4Axis": {},
    "transitionDuration": 250,
    "focusHeight": 300 //<-- ADD THIS
  }
}

Answer 2

选项对我不起作用的原因是因为我使用的是一个过时的angular-nvd3指令版本 - 其中一个不支持上述选项。我用bower卸载了angular-directive，nvd3和d3，并通过运行以下命令更新为angular-directive v1.0.0-rc2，nvd3 v1.8.1：

bower install angular-nvd3#1.0.0-rc.2 --save

问题解决了！

什么选项控制linewithFocusChart焦点区域（Angular-nvD3）？

2 个答案: