旋转标签nvd3折线图

时间:2016-07-19 12:24:57

标签: javascript angularjs d3.js svg nvd3.js

我想将x轴标签旋转到90度,因为它们相互重叠。我使用了rotateLabels,但它没有用于

<nvd3-line-chart
      data="singleLineChartData"
      id="singleLineChart"
      width="800"
      height="200"
      showXAxis="true"
      showYAxis="true"
      tooltips="true"
      interactive="true"
      rotateLabels="90"
      useinteractiveguideline="true"
      xAxisTickValues="xAxisTickValuesFunction()"
      xAxisTickFormat="xAxisTickFormat()"
      color="colorFunction()"
      isArea="false"
      margin="{left:50,top:50,bottom:50,right:50}"
      showLegend="true"
      legendColor="colorFunction()"
      noData="No Data!">
      <svg></svg>
</nvd3-line-chart>

1 个答案:

答案 0 :(得分:1)

您必须使用 'xaxisrotatelabels' 而不是 rotateLabels

<div ng-app='nvd3TestApp'>
    <div ng-controller="ExampleCtrl">
        <nvd3-line-chart
            data="exampleData"
            showXAxis="true"
            showYAxis="true"
            tooltips="true"
            xaxisrotatelabels ="90"
            interactive="true">
        </nvd3-line-chart>
    </div>
</div>

工作Application