AmCharts Добавление цвета фона на ярлык направляющих valueAxes - PullRequest
Новая
       26

AmCharts Добавление цвета фона на ярлык направляющих valueAxes

0 голосов
/ 27 июня 2018

Как добавить цвет фона на ярлык направляющих 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",
                },

                ],

            } ],

            ../
        } );

см. Изображение для справки

изображения экрана

Я новичок здесь, надеюсь, я смогу получить помощь

Спасибо

1 Ответ

0 голосов
/ 27 июня 2018

В настоящее время нет встроенного способа сделать это, но вы можете использовать ту же технику в этой демонстрации , чтобы создать цветную рамку вокруг вашей метки в событии drawn, изменив селектор. на .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);
  });
}

Демо

...