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>

amcharts-每个条形颜色不同

1 个答案: