amChart 传奇外观答案

【问题标题】：amChart legend appearanceamChart 传奇外观
【发布时间】：2014-06-06 10:37:12
【问题描述】：

我有一个包含很多行的 amChart，例如 one。传说看起来有点可怕。

是否可以通过一些滚动在单行中显示图例？喜欢columns？（我不想改变容器div的height）

【问题讨论】：

我最后几个小时的尝试似乎 AMcharts 序列类型没有每个 categoryAxis 的图例（（但如果你想添加另一个图表，你可以/拥有/（这样做）为每个图表选择和显示或隐藏选定的图表））

标签： javascript amcharts

【解决方案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;
}

【讨论】：

这将解决操作所面临的问题，但是当我们使用 AMcharts 导出功能将上述图表导出为 png 或 jpeg 时，我只能看到图表没有图例，您有任何解决方法同样的出现。

【解决方案2】：

试试这个

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

我希望这对你有帮助，最大列设置为 lengent 属性，你将在一行中得到所有内容

编辑因为您看不到您的字符，因为当我们在一列中制作图例时，您的图表无法适应容器的现有高度，因此请更改 css

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

希望这会有所帮助

【讨论】：

我明白了，但是图例还在一列（我需要在一行），这种情况下图表没有足够的空间...

【解决方案3】：

更改 Amcharts 的 Legends Label 中的 Font-Family 和 Font-Size

chart.legend.fontFamily="sans";

chart.legend.fontSize= 24;

【讨论】：