我有一个使用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');
}
});
}
};
}]);
答案 0 :(得分:0)
在我使用的jQuery上(“autoMargins”:这样的真实):
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"autoMargins": true,
...
}
我希望它对你有用。