amChart legend appearance

问题

I have an amChart with many rows, like this one. The legend looks a bit awfull.

Is it possible to display the legend in a single row with some scrolling? like for the columns? (I don't want to change the container div's height)

回答1:

The question is too old to answer but still it may help someone to get rid of this problem quickly.

Following is the proper documentation provided by amcharts: https://www.amcharts.com/tutorials/putting-a-legend-outside-the-chart-area/

And here is the JsFiddle Example: http://jsfiddle.net/amcharts/Cww3D/

HTML:

Chart div:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>

<br />
Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>

JavaScript:

var chart;

var chartData = [{category:" "}];

AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.autoMarginOffset = 0;
    chart.dataProvider = chartData;
    chart.categoryField = "category";
    chart.startDuration = 1;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 45; // this line makes category values to be rotated
    categoryAxis.gridAlpha = 0;
    categoryAxis.fillAlpha = 1;
    categoryAxis.fillColor = "#FAFAFA";
    categoryAxis.gridPosition = "start";

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 5;
    valueAxis.title = "Visitors from country";
    valueAxis.axisAlpha = 0;
    chart.addValueAxis(valueAxis);

    // GRAPH
    for (var i = 0; i < 15; i ++) {
        chartData[0]["val"+i]  = Math.floor(Math.random() * 20);
        var graph = new AmCharts.AmGraph();
        graph.valueField = "val"+i;
        graph.title = "Graph #"+i;
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 1;
        chart.addGraph(graph);
    }

    // LEGEND
    var legend = new AmCharts.AmLegend();
    chart.addLegend(legend, "legenddiv");

    // WRITE
    chart.write("chartdiv");
});

CSS:

body { font-family: Verdana; padding: 15px;}

#legenddiv {
    height: 100px !important; /* force that height */
    overflow: auto;
    position: relative;
}

回答2:

try this

"legend": {
        "maxColumns": 1,
        "useGraphSettings": true
    }

i hope this would help you , max columns is set for lengent property , you will get all in one line

EDIT as you cant see your char, because when we make legends in one column so your chart cant fit in existing height of your container so make change in css

#chartdiv {
width       : 100%;
height      : 1000px;
font-size   : 11px;
}

hope this will help

来源：https://stackoverflow.com/questions/24079778/amchart-legend-appearance

标签

javascript

amcharts