Графики AM. Как изменить фон столбцов? - PullRequest
Новая
       6

Графики AM. Как изменить фон столбцов?

0 голосов
/ 27 апреля 2018

Я использую JS скрипт AMCharts. Я вывожу диаграмму со следующим кодом: 

<div id="chartdiv_refinance"></div>
<script src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js"></script>

<script>
var chart1 = AmCharts.makeChart("chartdiv_refinance", {
    "theme": "none",
    "type": "serial",
    "dataProvider": [{
        "type": "text1",
        "label1": var1,
        "label2": var2
    }],
    "valueAxes": [{
        "unit": "text2",
        "position": "left",
        "title": "",
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "text3",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "text4",
        "type": "column",
        "valueField": "text5",
    }, {
        "balloonText": "text6",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "text7",
        "type": "column",
        "clustered":false,
        "columnWidth":0.5,
        "valueField": "text8",
    }],
    "plotAreaFillAlphas": 0.1,
    "categoryField": "type",
    "categoryAxis": {
        "gridPosition": "start"
    },
    "export": {
        "enabled": true
     }
});

введите описание изображения здесь

Мне нужно изменить цвета столбцов. Я пытался указать свойства «цвет» и «фон», но это не работает. Вы можете мне помочь? Как правильно изменить цвета колонок?

1 Ответ

0 голосов
/ 27 апреля 2018

Вы можете установить свойство fillColors на своих графиках, чтобы изменить их цвет фона. 

"graphs": [{
    "fillColors": "#CCFF00", 
    // ...
}, {
    // ...
    "fillColors": "#880000", 
    // ...
}],

Демо ниже: 

var var1 = 10,
  var2 = 20;
var chart1 = AmCharts.makeChart("chartdiv_refinance", {
  "theme": "none",
  "type": "serial",
  "dataProvider": [{
    "type": "text1",
    "label1": var1,
    "label2": var2
  }],
  "valueAxes": [{
    "unit": "text2",
    "position": "left",
    "title": "",
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "text3",
    "fillColors": "#CCFF00",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "title": "text4",
    "type": "column",
    "valueField": "label1",
  }, {
    "balloonText": "text6",
    "fillColors": "#880000",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "title": "text7",
    "type": "column",
    "clustered": false,
    "columnWidth": 0.5,
    "valueField": "label2",
  }],
  "plotAreaFillAlphas": 0.1,
  "categoryField": "type",
  "categoryAxis": {
    "gridPosition": "start"
  },
  "export": {
    "enabled": true
  }
});
#chartdiv_refinance {
  width: 100%;
  height: 300px;
}
<div id="chartdiv_refinance"></div>
<script src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://cdn.amcharts.com/lib/3/serial.js"></script>
<script src="http://cdn.amcharts.com/lib/3/pie.js"></script>

Обратите внимание, что ваши valueField должны соответствовать вашим dataProvider свойствам. Я изменил «text5» и «text8» на «label1» и «label2».

...