Question

如何为valueAxes指南标签添加背景颜色？似乎没有可以设置的选项，或者我真的不知道它是什么。这是我目前在amcharts中的设置

$chart = AmCharts.makeChart( "chartdiv", {
            "type": "serial",
            "theme": "light",
            "dataProvider": $data_trade,
            "valueAxes": [ {
                "position": "right",
                "guides": [ {
                    "value": $tickValue,
                    "label": $tickValue,
                    "position": "right",
                    "dashLength": 0,
                    "axisThickness": 1,
                    "fillColor": "#000",
                    "axisAlpha": 1,
                    "fillAlpha": 1,
                    "color": "#000",
                    "fontSize": 16,
                    "backgroundColor": "#008D00",
                    "labelColorField": "red",
                },

                ],

            } ],

            ../
        } );

请参阅图片以供参考

image-screenshot

我是新来的，希望我能得到帮助

谢谢

Answer 1

当前没有内置方法可以执行此操作，但是您可以在drawn事件中使用this demo中的相同技术，通过将选择器更改为在标签周围创建彩色框.amcharts-axis-label.amcharts-guide定位指南标签并在其中应用颜色。请注意，该演示并未设置单独的颜色，但是如果您想从自定义的drawn属性中提取颜色，则backgroundColor事件可让您访问图表对象：

AmCharts.makeChart("...", {
  // ...
  "valueAxes": [{
    // ...
    "guides": [{
      "value": 4.5,
      "label": "4.5",
      "backgroundColor": "#22ff11" //custom property for drawn event
    }, {
      "value": 7.5,
      "label": "7.5",
      "backgroundColor": "#11ddff"
    }]
  }],
  // ...
  "listeners": [{
    "event": "drawn",
    "method": addLabelBoxes
  }] 
});

function addLabelBoxes(event) {
  var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
  Array.prototype.forEach.call(labels, function(label, i) {
    var parent = label.parentNode;
    var labelText = label.childNodes[0].textContent; //get guide label from SVG
    var svgRect = label.getBBox();
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    // find the matching guide label in the chart object
    var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
      return guide.label == labelText;
    });
    rect.setAttribute("x", svgRect.x);
    rect.setAttribute("y", svgRect.y);
    rect.setAttribute("transform", label.getAttribute("transform"))
    rect.setAttribute("width", svgRect.width);
    rect.setAttribute("height", svgRect.height);
    rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
    rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
    rect.setAttribute("opacity", 1);
    parent.insertBefore(rect, label);
  });
}

Demo

AmCharts将背景色添加到valueAxes引导标签

1 个答案: