Question

我有一个包含许多行的amChart，例如one。传说看起来有点糟糕。

是否可以通过滚动在单行中显示图例？喜欢columns？（我不想更改容器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;
}

Answer 2

试试这个

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

我希望这会对你有帮助，最大列设置为lengent属性，你将获得所有的一行

修改因为你看不到你的字符，因为当我们在一列中制作图例时你的图表无法适应容器的现有高度，所以在css中进行更改

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

希望这会有所帮助

Answer 3

更改 Amcharts 图例标签中的字体系列和字体大小

chart.legend.fontFamily="sans";

chart.legend.fontSize= 24;

amChart传奇外观

3 个答案: