amChart图例外观 [英] amChart legend appearance

问题描述

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

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

是否可以通过滚动将图例显示在一行中?喜欢 列?(我不想改变容器div的height)

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)

推荐答案

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

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

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

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

这里是 JsFiddle 示例:http://jsfiddle.net/amcharts/Cww3D/

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:

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;
}

这篇关于amChart图例外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！