Amchart3条形图对齐方式

时间:2019-10-07 16:40:36

标签: css charts bar-chart amcharts

我已经在Amchart3库中创建了条形图。有一些对齐问题,我无法根据需要解决。

1)我希望标签在条形线附近移动。目前,标签和条形线之间有很多空间。

2)要在条形线的顶部和底部角落添加边框半径(仅在右侧)

在下面附加图片以供参考 enter image description here

这是我的代码:

const barData = [
                {
                    label: "Ford",
                    income: 200,
                    max: 500,
                    colorKey: '#00c7ff'
                },
                {
                    label: "Toyota",
                    income: 380,
                    max: 500,
                    colorKey: '#00c7ff'
                },
                {
                    label: "Nissan",
                    income: 180,
                    max: 500,
                    colorKey: '#00c7ff'
                },
                {
                    label: "BMW",
                    income: 480,
                    max: 500,
                    colorKey: '#00c7ff'
                }
            ];
            const colorCodes = ['#00c7ff', '#7700ff', '#638a4a', '#cc2626'];
    
            // bar color
            AmCharts.addInitHandler(function (chart) {
                // check if there are graphs with autoColor: true set
                for(var i = 0; i < chart.graphs.length; i++) {
                    var graph = chart.graphs[i];
                    if (graph.autoColor !== true)
                        continue;
                    var colorKey = "autoColor-"+i;
                    graph.lineColorField = colorKey;
                    graph.fillColorsField = colorKey;
                    for(var x = 0; x < chart.dataProvider.length; x++) {
                        var color = colorCodes[x];
                        chart.dataProvider[x][colorKey] = color;
                    }
                }
                
            }, ["serial"]);
            
            var chart = AmCharts.makeChart("draw", {
                hideCredits: true,
                type: 'serial',
                rotate: true,
                autoMargins: false,
                addClassNames: true,
                resizeCategoryWidth: 10,
                marginLeft: 40,
                marginRight: 15,
                dataProvider: barData,
                graphs: [
                    {
                        fillAlphas: 1,
                        lineAlpha: 0,
                        lineColor: '#2196f3',
                        type: 'column',
                        fillColors: '#E2E7EE',
                        clustered: false,
                        valueField: 'max',
                        labelText: '[[label]]',
                        labelFunction: function(val) {
                            return val.dataContext.income;
                        },
                        labelPosition: 'top',
                        labelOffset: 14,
                        columnWidth: 0.18,
                        cornerRadiusTop: 2,
                        showBalloon: false,
                        showOnAxis: true
                    },
                    {
                        fillAlphas: 1,
                        lineAlpha: 0,
                        type: 'column',
                        valueField: 'income',
                        columnWidth: 0.18,
                        cornerRadiusTop: 2,
                        showBalloon: true,
                        autoColor: true,
                        showOnAxis: true
                    }
                ],
                chartCursor: {
                    categoryBalloonEnabled: false,
                    cursorAlpha: 0,
                    zoomable: false
                },
                categoryField: 'label',
                categoryAxis: {
                    gridAlpha: 0,
                    color: '#333',
                    axisAlpha: 1,
                    axisThickness: 2,
                    fontSize: 12,
                    inside: true,
                    gridPosition: 'start',
                    tickPosition: 'start',
                    tickLength: 0,
                    addClassNames: "bars"
                },
                valueAxes: [
                    {
                        axisAlpha: 0,
                        gridAlpha: 0,
                        showLastLabel: false,
                        zeroGridAlpha: 0,
                        gridThickness: 0,
                        labelsEnabled: false
                    }
                ],
                export: {
                    enabled: false
                }
            });
<html>
        <head>
            <title>HTML Bar Chart</title>
            <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
            <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
            <script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
        </head>
        <body>
            <div id="draw" style="width: 600px; height: 400px;"></div>
        </body>
    </html>

请建议您输入。我已经尝试了很多来自Google的选项,但无法实现。

0 个答案:

没有答案