根据 json 属性值更改 amCharts XYCharts 列颜色

Question

我想根据 json 数据的值更改 amCharts XYCharts 列（或类别或系列）的颜色。

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2125,
  "color": "#333333"
}, {
  "country": "China",
  "visits": 2122,
  "color": "#FA0152"
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

}); // end am4core.ready()

#chartdiv {
  width: 100%;
  height: 500px;
}

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- HTML -->
<div id="chartdiv"></div>

我的JSON数据是：

[{
  "country": "USA",
  "visits": 2125,
  "color": "#333333"
}, {
  "country": "China",
  "visits": 2122,
  "color": "#FA0152"
}]

我希望图表的一列颜色应符合 JSON 属性 "color"。任何帮助或想法将不胜感激。

Answer 1

您可以使用 adapter 函数更改列颜色运行时间。根据您的需要查看我更新的答案。

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2125,
  "color": "#333333"
}, {
  "country": "China",
  "visits": 2122,
  "color": "#FA0152"
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
    series.columns.template.adapter.add("fill", function (fill, target) {
        return target.dataItem.dataContext["color"];
    });
    series.columns.template.adapter.add("stroke", function (fill, target) {
        return target.dataItem.dataContext["color"];
    });

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

}); // end am4core.ready()

#chartdiv {
  width: 100%;
  height: 500px;
}

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- HTML -->
<div id="chartdiv"></div>

Answer 2

function drawChart(ChartType) {
  var chart = am4core.create("chartdiv", am4charts.PieChart3D);
  am4core.ready(function () {
  // Themes begin
  am4core.useTheme(am4themes_animated);
});
if (ChartType == 'P') {
  chart = am4core.create("chartdiv", am4charts.PieChart3D);
  chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

  chart.legend = new am4charts.Legend();
}
else {
  if (ChartType == 'B') {
  chart = am4core.create("chartdiv", am4charts.XYChart);
  }
}
      
chart.data = [
{
country: "India",
match: 421,
color: "#00F"
},
{
country: "WestIndies",
match: 56,
color: "#F00"
},
{
country: "Ireland",
match: 201,
color: "#0FF"
},
{
country: "Germany",
match: 165,
color: "#c2c2c2"
}
];

if (ChartType == 'P') {
    var series = chart.series.push(new am4charts.PieSeries3D());
    series.dataFields.value = "match";
    series.dataFields.category = "country";

}
else if (ChartType == 'B') {

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

    categoryAxis.renderer.minGridDistance = 60;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.extraMax = 0.1;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = "country";
    series.dataFields.valueY = "match";

    series.tooltipText = "{valueX.value}"
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusTopRight = 10;
    series.columns.template.column.cornerRadiusTopLeft = 10;

    var labelBullet = series.bullets.push(new am4charts.LabelBullet());
    labelBullet.label.verticalCenter = "bottom";
    labelBullet.label.dy = -10;
    labelBullet.label.text = "{values.valueY.workingValue.formatNumber('#.')}";

    chart.zoomOutButton.disabled = true;

    series.columns.template.adapter.add("fill", function (fill, target) {
        //return chart.colors.getIndex(target.dataItem.index);
        // Default color
        return target.dataItem.dataContext["color"];
        // custom color
    });

    categoryAxis.sortBySeries = series;
}
}

#chartdiv {
  width: 100%;
  height: 500px;
}
/* in case of non visibility of grid in map*/
path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<body>
<!-- HTML -->
<input type="button" value="3D Pie Chart" onclick="drawChart('P')" />
<input type="button" value="Horizental Bar Chart" onclick="drawChart('B')" />
<div id="chartdiv">
</div>

</body>

根据 json 属性值更改 amCharts XYCharts 列颜色

Change amCharts XYCharts column colors based on json property value

javascript

charts

json

amcharts

amcharts4

根据 json 属性 值更改 amCharts XYCharts 列颜色

Change amCharts XYCharts column colors based on json property value

javascript

charts

json

amcharts

amcharts4

根据 json 属性值更改 amCharts XYCharts 列颜色