amChart 图例外观

Question

我有一个有很多行的 amChart，就像这个一样。传说看起来有点可怕。

是否可以通过一些滚动在单行中显示图例？就像柱子一样？（我不想更改容器 div 的height）

Answer 1

这个问题太老了，无法回答，但它仍然可以帮助某人快速摆脱这个问题。

以下是 amcharts 提供的正确文档： https://www.amcharts.com/tutorials/putting-a-legend-outside-the-chart-area/

这是 JsFiddle 示例：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;
}