如何以角度更改我的条形图的图例

Question

如何在nvd3图表中从上到下更改图例位置。

 options = {
"chart": {
  "type": "multiBarChart",
  "height": 300,
  "margin": {
    "top": 20,
    "right": 20,
    "bottom": 45,
    "left": 45
  },
  "clipEdge": true,
  "duration": 500,
  "stacked": false,
  "xAxis": {
    // "axisLabel": "Time (ms)",
    "showMaxMin": false
  },
  "yAxis": {
    // "axisLabel": "Y Axis",
    "axisLabelDistance": -20,
    tickFormat:
      function (d) {
        return d3.format('0f')(d);
      }

  },
  showControls: false,
  color: ["#71B84F", "#FFC300"],
}

我正在使用

链接创建条形图。 https://krispo.github.io/angular-nvd3/#/multiBarChart

Answer 1

您需要添加：legendPosition: 'bottom'

示例：

 options = {
"chart": {
  "type": "multiBarChart",
  "height": 300,
  "margin": {
    "top": 20,
    "right": 20,
    "bottom": 45,
    "left": 45
  },
  "clipEdge": true,
  "duration": 500,
  "stacked": false,
  "xAxis": {
    // "axisLabel": "Time (ms)",
    "showMaxMin": false
  },
  "yAxis": {
    // "axisLabel": "Y Axis",
    "axisLabelDistance": -20,
    tickFormat:
      function (d) {
        return d3.format('0f')(d);
      }

  },
  showControls: false,
  color: ["#71B84F", "#FFC300"],
  legend: {
      margin: {
        top: 5, right: 1, bottom: 1, left: 1
      },            
  },
  legendPosition: 'bottom'
}

Answer 2

与其他图表类型不同，multiBarChart没有属性legendPosition。因此，您需要定义legend.margin并使用top和bottom的值。

chart: {
  ...
  legend: {
    margin : {
      top: 220,
      right: 20,
      bottom: 20,
      left: 45
    }
  },
  ...