amCharts angular 指令无法更改 ChartScrollbar 拖动手柄
amCharts angular directive cannot change ChartScrollbar draghandles
我似乎无法让 amCharts 尊重 ChartScrollbar
上的 dragIcon
属性。我有 a plunk here 证明了这个问题。
我怀疑这是 GrantMStevens amChartsDirective because of the previous problem I had with it not passing properties correctly and the fact that it works in this demo. The previous was debugged by xorspark 的问题,我能够复制他的调试,但这并没有以同样的方式被破坏。不幸的是,我还不够擅长调试 JavaScript 来追踪这个问题。
有人有什么想法吗?
'use strict';
angular.module('App')
.controller('MyChartController', ['$scope', function($scope) {
$scope.data = {};
$scope.amChartOptions = {
type: "serial",
creditsPosition: "upper-left",
categoryField: "IncidentId",
rotate: true,
theme: "light",
categoryAxis: {
parseDates: false,
gridAlpha: 0.3,
gridColor: "#d3d3d3"
},
trendLines: [],
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
chartScrollbar: {
oppositeAxis: true,
autoGridCount: true,
graph: "AmGraph-1",
scrollbarHeight: 65,
dragIcon: "dragIconRoundSmall",
dragIconHeight: 65,
backgroundColor: "#000",
//color: "#000",
backgroundAlpha: .5,
selectedBackgroundColor: "#337ab7",
svgIcons: true
},
graphs: [{
fillColorsField: "lineColor",
lineColorField: "lineColor",
balloonText: "[[title]] for [[category]]: [[value]]",
fillAlphas: 1,
id: "AmGraph-1",
title: "Escalation Age",
type: "column",
valueField: "Age"
}],
guides: [],
valueAxes: [{
baseValue: 0,
id: "ValueAxis-1",
labelFrequency: 1,
dateFormats: [],
title: "Days Active",
autoGridCount: true,
gridAlpha: 0.3,
gridColor: "#d3d3d3",
}],
allLabels: [],
balloon: {},
legend: {
enabled: false
},
titles: [{
id: "Title-1",
size: 15,
text: ""
}],
data: [
{
"lineColor": "#ff0000",
"IncidentId": 93528214,
"Age": 19
},{
"lineColor": "#ff0000",
"IncidentId": 93434314,
"Age": 16
},{
"lineColor": "#ff0000",
"IncidentId": 93524544,
"Age": 12
},{
"lineColor": "#ff0000",
"IncidentId": 93525454,
"Age": 10
},{
"lineColor": "#ff0000",
"IncidentId": 96578214,
"Age": 4
},{
"lineColor": "#ff0000",
"IncidentId": 93334519,
"Age": 2
}]
}
}]);
cdnjs 上旧的 3.13.0 版本的 AmCharts 不支持更改dragIcon
。您需要使用更新的版本。最新版本的AmCharts库可以在AmCharts自己的CDN上找到:
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/black.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/dark.js"></script>
我似乎无法让 amCharts 尊重 ChartScrollbar
上的 dragIcon
属性。我有 a plunk here 证明了这个问题。
我怀疑这是 GrantMStevens amChartsDirective because of the previous problem I had with it not passing properties correctly and the fact that it works in this demo. The previous was debugged by xorspark 的问题,我能够复制他的调试,但这并没有以同样的方式被破坏。不幸的是,我还不够擅长调试 JavaScript 来追踪这个问题。
有人有什么想法吗?
'use strict';
angular.module('App')
.controller('MyChartController', ['$scope', function($scope) {
$scope.data = {};
$scope.amChartOptions = {
type: "serial",
creditsPosition: "upper-left",
categoryField: "IncidentId",
rotate: true,
theme: "light",
categoryAxis: {
parseDates: false,
gridAlpha: 0.3,
gridColor: "#d3d3d3"
},
trendLines: [],
pathToImages: "http://cdn.amcharts.com/lib/3/images/",
chartScrollbar: {
oppositeAxis: true,
autoGridCount: true,
graph: "AmGraph-1",
scrollbarHeight: 65,
dragIcon: "dragIconRoundSmall",
dragIconHeight: 65,
backgroundColor: "#000",
//color: "#000",
backgroundAlpha: .5,
selectedBackgroundColor: "#337ab7",
svgIcons: true
},
graphs: [{
fillColorsField: "lineColor",
lineColorField: "lineColor",
balloonText: "[[title]] for [[category]]: [[value]]",
fillAlphas: 1,
id: "AmGraph-1",
title: "Escalation Age",
type: "column",
valueField: "Age"
}],
guides: [],
valueAxes: [{
baseValue: 0,
id: "ValueAxis-1",
labelFrequency: 1,
dateFormats: [],
title: "Days Active",
autoGridCount: true,
gridAlpha: 0.3,
gridColor: "#d3d3d3",
}],
allLabels: [],
balloon: {},
legend: {
enabled: false
},
titles: [{
id: "Title-1",
size: 15,
text: ""
}],
data: [
{
"lineColor": "#ff0000",
"IncidentId": 93528214,
"Age": 19
},{
"lineColor": "#ff0000",
"IncidentId": 93434314,
"Age": 16
},{
"lineColor": "#ff0000",
"IncidentId": 93524544,
"Age": 12
},{
"lineColor": "#ff0000",
"IncidentId": 93525454,
"Age": 10
},{
"lineColor": "#ff0000",
"IncidentId": 96578214,
"Age": 4
},{
"lineColor": "#ff0000",
"IncidentId": 93334519,
"Age": 2
}]
}
}]);
cdnjs 上旧的 3.13.0 版本的 AmCharts 不支持更改dragIcon
。您需要使用更新的版本。最新版本的AmCharts库可以在AmCharts自己的CDN上找到:
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/black.js"></script>
<script src="https://https://www.amcharts.com/lib/3/themes/dark.js"></script>