我设置了一个指令来显示使用AmCharts的图表。除了轴标签和标题被截断的问题外，一切都工作正常，就好像它没有正确计算包括轴在内的整个图表的宽度一样。我附上了我的指令和结果的截图。您可以在y轴上最清楚地看到标签，它们只是被省略了。更改图表加载到的div的大小没有任何效果。如果我将其变大或变小，它只会改变大小，但修剪仍然存在。
'use strict';
angular.module('core').directive('amchart', ['$window',
function($window) {
return {
template: '<div id="follower-chart" class="amchart" style="height:300px;width:960px;padding:0 15px;"></div>',
restrict: 'EA',
replace: false,
scope: {
chartType: '@',
chartData: '='
},
link: function postLink(scope, element, attrs) {
var chart = false;
scope.$watch('chartData',function(data){
if(data) {
var id = $window._.uniqueId('chart_');
/*element.attr('id', id);
element.css({
height: '260px',
width: '870px',
padding: '0 0 60px 60px',
margin: '0 auto'
});*/
console.log(data);
chart = new $window.AmCharts.AmSerialChart();
// Data
chart.dataProvider = data;
chart.categoryField = 'date';
chart.dataDateFormat = 'YYYY-MM-DD';
chart.addClassNames = true;
// Axis
// Category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.labelOffset = 35;
categoryAxis.parseDates = true;
categoryAxis.equalSpacing = false;
// Value
var valueAxis = new $window.AmCharts.ValueAxis();
valueAxis.title = 'Followers';
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new $window.AmCharts.AmGraph();
graph.id = 'g1';
graph.bullet = 'round';
graph.bulletBorderAlpha = 1;
graph.bulletColor = '#FFFFFF';
graph.bulletSize = 5;
graph.hideBulletsCount = 50;
graph.lineThickness = 2;
graph.lineColor = '#1985a1';
graph.title = 'Follower Count';
graph.useLineColorForBulletBorder = true;
graph.valueField = 'value';
chart.addGraph(graph);
// CURSOR
var chartCursor = new $window.AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = 'bottom-right';
// WRITE
chart.write('follower-chart');
}
});
}
};
}]);