amcharts - разный цвет для каждого бара - PullRequest
Новая
       5

amcharts - разный цвет для каждого бара

0 голосов
/ 05 марта 2020

Я использую 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>

1 Ответ

0 голосов
/ 07 марта 2020

Вы можете указать цвет непосредственно при создании серии, так как он не прикреплен к каким-либо указанным c данным вне имени серии. Вы можете сделать это, установив 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>
...