amcharts - 每個條形的不同顏色

Question

我在我的支持系統中使用 AMCHARTS 作為圖表（用戶可以在其中提交支持票）。

我為此酒吧創建了腳本：

https://www.amcharts.com/demos/clustered-bar-chart/

我的圖表鞋，每個用戶，他所有的票按狀態分開

如何為每個狀態設置不同的顏色？

狀態示例：“正在等待支持回復”

這是我的腳本：

<!-- Resources -->
<script src="js/charts/core.js"></script>
<script src="js/charts/charts.js"></script>
<script src="js/charts/animated.js"></script>

<!-- Chart code -->
<script>
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 = [

    {
        "User": "Effi",
        "Waiting for support to reply" : 34, 
        "Waiting for customer to reply" : 33, 
        "Waiting for programmer to reply" : 42
    }               
    ,
    {
        "User": "Michal",
        "Waiting for support to reply" : 9,
        "Waiting for customer to reply" : 14, 
        "Waiting for programmer to reply" : 5
    }               

];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "User";
categoryAxis.numberFormatter.numberFormat = "#";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 1;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); 
valueAxis.renderer.opposite = true;

// Create series
function createSeries(field, name) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = field;
  series.dataFields.categoryY = "User";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
  series.columns.template.height = am4core.percent(100);
  series.sequencedInterpolation = true;
  series.columns.template.propertyFields.fill = "color";

  var valueLabel = series.bullets.push(new am4charts.LabelBullet());
  valueLabel.label.text = "{valueX}";
  valueLabel.label.horizontalCenter = "left";
  valueLabel.label.dx = 10;
  valueLabel.label.hideOversized = false;
  valueLabel.label.truncate = false;

  var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
  categoryLabel.label.text = "{name}";
  categoryLabel.label.horizontalCenter = "right";
  categoryLabel.label.dx = -10;
  categoryLabel.label.fill = am4core.color("#fff");
  categoryLabel.label.hideOversized = false;
  categoryLabel.label.truncate = false;
}

createSeries("Waiting for support to reply", "Waiting for support to reply"); 
createSeries("Waiting for customer to reply", "Waiting for customer to reply"); 
createSeries("Waiting for programmer to reply", "Waiting for programmer to reply")


}); // end am4core.ready()
</script>

Answer 1

您可以在創建系列時直接指定顏色，因為它似乎沒有附加到系列名稱之外的任何特定數據。 您可以通過設置列模板的fill和stroke來實現，例如：

 function createSeries(field, name, color) {
  // ...
  series.columns.template.fill = color;
  series.columns.template.stroke = color;
  // ...
 }

createSeries("Waiting for support to reply", "Waiting for support to reply", "#880088"); 
createSeries("Waiting for customer to reply", "Waiting for customer to reply", "#123456"); 
createSeries("Waiting for programmer to reply", "Waiting for programmer to reply", "#912100")

演示如下：

 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 = [ { "User": "Effi", "Waiting for support to reply": 34, "Waiting for customer to reply": 33, "Waiting for programmer to reply": 42 }, { "User": "Michal", "Waiting for support to reply": 9, "Waiting for customer to reply": 14, "Waiting for programmer to reply": 5 } ]; // Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "User"; categoryAxis.numberFormatter.numberFormat = "#"; categoryAxis.renderer.inversed = true; categoryAxis.renderer.grid.template.location = 1; categoryAxis.renderer.cellStartLocation = 0.1; categoryAxis.renderer.cellEndLocation = 0.9; var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.opposite = true; // Create series function createSeries(field, name, color) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = field; series.dataFields.categoryY = "User"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]"; series.columns.template.height = am4core.percent(100); series.sequencedInterpolation = true; series.columns.template.fill = color; series.columns.template.stroke = color; var valueLabel = series.bullets.push(new am4charts.LabelBullet()); valueLabel.label.text = "{valueX}"; valueLabel.label.horizontalCenter = "left"; valueLabel.label.dx = 10; valueLabel.label.hideOversized = false; valueLabel.label.truncate = false; var categoryLabel = series.bullets.push(new am4charts.LabelBullet()); categoryLabel.label.text = "{name}"; categoryLabel.label.horizontalCenter = "right"; categoryLabel.label.dx = -10; categoryLabel.label.fill = am4core.color("#fff"); categoryLabel.label.hideOversized = false; categoryLabel.label.truncate = false; } createSeries("Waiting for support to reply", "Waiting for support to reply", "#880088"); createSeries("Waiting for customer to reply", "Waiting for customer to reply", "#123456"); createSeries("Waiting for programmer to reply", "Waiting for programmer to reply", "#912100") }); // end am4core.ready()

 html, body { width: 100%; height: 100%; margin: 0; } #chartdiv { width: 100%; height: 100%; }

 <script src="//www.amcharts.com/lib/4/core.js"></script> <script src="//www.amcharts.com/lib/4/charts.js"></script> <script src="//www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>