编辑 AmCharts 的图例值样式

Question

这是我的 AmChart "graphs" 的代码：

           "graphs": [{
                "balloonText": "Activos mes actual: [[value]]",
                "title": "Actual",
                "valueField": "activo_actual",
                "fillAlphas": 0,
                "lineColor": "#001ea0",
            }, {
                "balloonText": "Activos mes anterior: [[value]]",
                "title": "Anterior",
                "valueField": "activo_anterior",
                "fillAlphas": 0,
                "lineColor": "#ff0a1b",
            }],

正如你在这张照片的红色框中看到的： valueField activo_actual 太长了，它溢出了 AmCharts 在其模板中默认设置的小 space。怎么编辑呢？有什么选择吗？我试图编辑 amcharts-value-legend 的 class：但我只能添加一些样式（粗体、颜色、文本大小），但不能提供一些 margin-left 或类似的东西，它是带有 <text> 标签的 svg。有什么建议吗？

Answer 1

与其尝试直接编辑 SVG，不如利用 legend object:

提供的几个属性

valueWidth - 调整每个图例条目的值部分的宽度
labelWidth - 调整每个图例条目的标记标题部分的宽度

例如：

AmCharts.makeChart("chartdiv", {
  // ...
  legend: {
    // ...
    valueWidth: /* some value */,
    labelWidth: /* some value */,
    // ...
  }
});

调整这些应该有助于防止您看到的文本重叠。

编辑 AmCharts 的图例值样式

Edit legend-value style of AmCharts

svg

amcharts