Как изменить цвет всех столбцов при выделении одного из них amchart - PullRequest
Новая
       9

Как изменить цвет всех столбцов при выделении одного из них amchart

0 голосов
/ 15 января 2019

Так что я хочу изменить цвет всех столбцов, кроме выбранного. Как мне это сделать? 

var chart = AmCharts.makeChart( "chartdiv", {
 "type": "serial",
 "theme": "none",
 "dataProvider": [ {
   "country": "USA",
   "visits": 2025
 }, {
   "country": "China",
   "visits": 1882
 }, {
   "country": "Japan",
   "visits": 1809
 } ],
 "valueAxes": [ {
   "gridColor": "#FFFFFF",
   "gridAlpha": 0.2,
   "dashLength": 0
 } ],
 "gridAboveGraphs": true,
 "startDuration": 1,
 "graphs": [ {
   "balloonText": "[[category]]: <b>[[value]]</b>",
   "fillAlphas": 0.8,
   "lineAlpha": 0.2,
   "fillColors": changeColour,
   "type": "column",
   "valueField": "visits"
 } ],
 "chartCursor": {
   "categoryBalloonEnabled": false,
   "cursorAlpha": 0,
   "zoomable": false
 },
 "categoryField": "country",
 "categoryAxis": {
   "gridPosition": "start",
   "gridAlpha": 0,
   "tickPosition": "start",
   "tickLength": 20
 },
 "export": {
   "enabled": true
 }

  } );

Я создал функцию, которую пытался вернуть цвет, если значение находится в пределах определенного числа, но это не работает.

1 Ответ

0 голосов
/ 16 января 2019

В AmCharts 3 нет способа динамически изменить цвет столбца с помощью функции в fillColors, поскольку он принимает только строку (AmCharts 4 имеет адаптеры, что позволяет делать это через функцию).

У вас есть несколько вариантов реализации этого в v3:

1) Используйте fillColorsField и отметьте элемент в ваших данных желаемым цветом: 

 "dataProvider": [ {
   "country": "USA",
   "visits": 2025
 }, {
   "country": "China",
   "visits": 1882
 }, {
   "country": "Japan",
   "visits": 1809,
   "fillColor": "#ff0000"
 } ],
 // ...
 "graphs": [ {
   "balloonText": "[[category]]: <b>[[value]]</b>",
   "fillAlphas": 0.8,
   "lineAlpha": 0.2,
   "fillColorsField": "fillColor", //match the property in your data 
   "type": "column",
   "valueField": "visits"
 } ],

Демо ниже: 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "none",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "fillColor": "#ff0000", //make this one red
    "visits": 1809
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "fillColorsField": "fillColor",
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<link href="//www.amcharts.com/lib/3/plugins/export/export.css" media="all" rel="stylesheet" type="text/css" />
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="chartdiv"></div>

2) Используйте negativeFillColors и negativeBase, чтобы диаграмма автоматически меняла цвет на negativeFillColors, если значение столбца ниже negativeBase значение: 

 "graphs": [ {
   "balloonText": "[[category]]: <b>[[value]]</b>",
   "fillAlphas": 0.8,
   "lineAlpha": 0.2,
   "negativeBase": 1810, //columns with values less than this will be filled red
   "negativeFillColors": "#ff0000",
   "type": "column",
   "valueField": "visits"
 } ],

Демо ниже 

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "none",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "negativeBase": 1810,
    "negativeFillColors": "#ff0000",
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<link href="//www.amcharts.com/lib/3/plugins/export/export.css" media="all" rel="stylesheet" type="text/css" />
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="chartdiv"></div>
...