javascript - AM图表。如何更改列的背景？

Question

我使用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
     }
});

enter image description here

我需要更改列的颜色。我尝试指定属性“颜色”和“背景”，但它不起作用。你能帮助我吗？如何正确改变扬声器的颜色？

Answer 1

您可以设置 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”。