amChart传奇外观 [英] amChart legend appearance

问题描述

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

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屋！