Question

我有一个使用AmCharts显示图表的指令设置。一切都运行良好，除了轴标签和标题被切断，就像它没有正确计算整个图表的宽度，包括轴的空间，我附上了我的指令和结果的屏幕截图

enter image description here

你可以在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');

            }
        });
    }
};

}]）;

Answer 1

在我使用的jQuery上（“autoMargins”：这样的真实）：

chart = AmCharts.makeChart("chartdiv", {
                                         "type": "serial",
                                         "addClassNames": true,
                                         "theme": "light",
                                         "autoMargins": true,
                                          ...
                                         }

我希望它对你有用。

AmChart标签被切断了

1 个答案: