nvd3 angular-nvd3 d3垂直顯示圖表圖例

我使用nvd3和angular-nvd3創建餅圖。我已經顯示了我的傳奇，但它在頂部連續排列。nvd3 angular-nvd3 d3垂直顯示圖表圖例

我想將其顯示在左側的列中。

我找到了http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview但是當我使用.js文件中的選項時，所做的只是改變了圖例的外觀而不是放置。

該css文件是空的，似乎沒有在HTML中內嵌的CSS。所以我不確定他們是如何將圖例的位置放在列的右側。

我確實看到legendPosition: 'right'，但是當我使用legendPosition: 'left'時，整個餅圖消失。

所以至少我該如何顯示在一列中，如果我可以將其更改爲左側，那將會很好。

選擇對象：

$scope.patientsChart = { 
    chart: { 
      type: 'pieChart', 
      height: 500, 
      x: function (d) { 
       var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"]; 
       return PatientStatuses[d.Key -1]; 
      }, 
      y: function (d) { return d.Value.length; }, 
      showLabels: true, 
      duration: 500, 
      labelThreshold: 0.01, 
      labelSunbeamLayout: true, 
      showLegend: false, 
      legend: { 
       margin: { 
        top: 5, 
        right: 35, 
        bottom: 5, 
        left: 0 
       } 
      }, 
      pie: { 
       dispatch: { 
        //elementClick: function (e) { console.log(e) } 
       } 
      }, 
      color: function (d) { 
       var colors = ['#4066b9', '#009446', '#eba323', '#ee2726']; 
       return colors[d.Key - 1]; 
      } 
     } 
    };

指令對角nvd3：

<nvd3 options="FEV1Chart" data="patients"></nvd3>

來源

2016-01-26 James White

您可以發佈您的代碼請？ – Giordano

加入我的帖子吧！ –

在nv.d3.js源代碼中，「legendPosition」配置的唯一選項是「top」和「right」。移動圖例的一種奇怪的方法是增加其填充，就像我在[this plunker]（http://plnkr.co/edit/albQB6lIBndIJTQiN4dp?p=preview）中所做的一樣，但不修改源代碼的方式呈現svg，我不確定如何與左側的圖例並排獲取餅圖和傳說。你可以看到我嘗試抓取相應的CSS類並以這種方式操縱它們，但沒有運氣。 –

如果你想在X軸rotateLabels只需添加「rotateLabels：-45」

例如，

xAxis: { 
         axisLabel: 'Hours', 
         axisLabelDistance: 20, 
         showMaxMin: false, 
         rotateLabels: -45 
        },

來源

2017-10-19 10:40:28

nvd3 angular-nvd3 d3垂直顯示圖表圖例

回答

相關問題