我正试图在我的角度应用程序中创建一个Highcharts半圆形圆环图。我已经安装了Highcharts-ng指令。无论出于何种原因,它似乎完全跳过了plotOptions部分,也就是设置了开始和结束角度,从而创建了甜甜圈。我得到的是一个完整的圆形饼图。这是我的代码:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
我在这里创建了一个JSFiddle:
http://jsfiddle.net/mikemahony/hzdewsx8/
我错过了什么?
答案 0 :(得分:2)
Highcharts-ng指令需要在选项下使用这些属性。
$scope.highchartsNG = {
options:{
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
}
},
在highchartsNGConfig中,options属性是标准的highcharts选项对象。例如任何你可以传递到`new Highcharts.Chart(options);在这里工作。
监视此选项对象的更改。当某些内容发生变化时,将重新创建整个图表。