Легенда не следует за цветами серии, если она установлена ​​в series.columns.template.propertyFields.fill, как в случае с series.fill - PullRequest
Новая
       18

Легенда не следует за цветами серии, если она установлена ​​в series.columns.template.propertyFields.fill, как в случае с series.fill

1 голос
/ 11 марта 2019

Легенда не соответствует цветам серии, если она установлена ​​в series.columns.template.propertyFields.fill, как в случае с series.fill. Например, в https://jsfiddle.net/bosiljkakostic1/de16nbu7/4/ Когда вы раскомментируете 

//series1.fill = "red";
//series2.fill = "blue";
//series3.fill = "green";

пример работает хорошо, но если цвет выполняется с помощью 

series1.columns.template.propertyFields.fill = "color1";
series2.columns.template.propertyFields.fill = "color2";
series3.columns.template.propertyFields.fill = "color3";

, цвет легенды не соответствует цветам полного кода серии: 

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
<script>
/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 * MODIFIED by Bosiljka Kosic, adding legend
 * and more series to describe the problem :
 * legend do not follow colors of series 
 * when it is set by  
 * series.columns.template.propertyFields.fill
 * as when it is with series.fill
 */

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "category": "Research & Development",
  "value1": 450,
  "color1": "red",
  "value2": 1200,
  "color2": "blue",
  "value3": 1500,
  "color3": "green"
},
{
  "category": "Marketing",
  "value1": 700,
  "color1": "red",
  "value2": 1000,
  "color2": "blue",
  "value3": 1200,
  "color3": "green"
},
{
  "category": "Distribution",
  "value1": 600,
  "color1": "red",
  "value2": 400,
  "color2": "blue",
  "value3": 1100,
  "color3": "green"
}              
             ];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.columns.template.propertyFields.fill = "color1";
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.columns.template.propertyFields.stroke = "color2";
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "value3";
series3.dataFields.categoryX = "category";
series3.columns.template.propertyFields.stroke= "color3";
series1.columns.template.propertyFields.stroke = "color1";
series2.columns.template.propertyFields.fill = "color2";
series3.columns.template.propertyFields.fill = "color3";
//series1.fill = "red";
//series2.fill = "blue";
//series3.fill = "green";
series1.name="2017";
series2.name="2018";
series3.name="2019";
chart.legend = new am4charts.Legend();
</script>
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 300px;
}
</style>

1 Ответ

0 голосов
/ 12 марта 2019

Маркеры легенды захватывают цвет из заливки серии. Когда вы комментируете это слева, заполняя серию ' колонок через привязку поля свойства. dataItem.dataContext маркеров легенды являются их связанными рядами, поэтому данные столбцов не имеют значения, так что они никогда не попадают в маркеры. Даже если бы столбцы / их данные были релевантными, как бы диаграмма знала, какой из столбцов выбрать для стилизации элемента легенды?

Что вы можете сделать, это каждый раз, когда столбец окрашивается, обновлять маркер легенды для серии столбца (или подождать, пока не будет создан экземпляр столбца, т.е. columns.template.once("datavalidated", ...) вместо адаптера, поэтому это делается только один раз).

Чтобы настроить маркеры легенды , нам нужно установить useDefaultMarker на true. 

chart.legend.markers.template.useDefaultMarker = true;

chart.series.each(function(series) {
    series.columns.template.adapter.add("fill", function(fill, target) {
        chart.legend.markers.each(function(marker) {
            if (marker.dataItem.dataContext === target.dataItem.component) {
                marker.children.getIndex(0).fill = fill;
            }
        });
        return fill;
    });
});

Вилка вашего кода:

https://jsfiddle.net/notacouch/ot5uadez/

...