Question

我正在接管一个使用Angular-nvD3绘制饼图的网站，当我在本地构建网站时，标题显示不正确。

这是我在本地构建网站时的样子......

代码将字符串数组输入到图表对象的“选项”对象的“标题”属性中。工作站点为此数组中的每个字符串创建了单独的行，但本地站点只是将字符串连接成一行。

我已确保所有依赖项都在相同版本上。我已经浏览了nvd3和angular-nvd3的所有文档，但找不到任何对标题的引用作为数组。

所以问题是，是否可以将标题设置为以existing website上的方式自动换行到多行？

...代码

var app = angular.module('d3app', ['nvd3']);

app.controller('MainCtrl', function($scope) {
$scope.options = {
    chart: {
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: true,
        donutRatio: .55,
        showLegend: false,
        duration: 500,
        donut: true,
        labelsOutside: true,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        title:['KOSTNADSSPLITT','(OPPVASKPROSESSEN)'],
        legend: {
            margin: {
                top: 5,
                right: 35,
                bottom: 5,
                left: 0
            }
        }
    }
};

$scope.data = [
    {
        key: "One",
        y: 5
    },
    {
        key: "Two",
        y: 2
    },
    {
        key: "Three",
        y: 9
    },
    {
        key: "Four",
        y: 7
    },
    {
        key: "Five",
        y: 4
    },
    {
        key: "Six",
        y: 3
    },
    {
        key: "Seven",
        y: .5
    }
];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet"/>
<div ng-app="d3app">
  <div ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3> 
  </div>
</div>

Answer 1

正如jeznag所指出的，该网站的Bower依赖关系（Angular Material Design）之一的Code已被手动修改。所以这不是错误或一般问题。

如何复制此nvd3图表标题样式/定位行为？

1 个答案: