amcharts示例

た入场券 2022-05-08 23:40 205阅读 0赞

1.竖向双Y轴柱状图

![70][]

核心代码：

var amOptions = {
 "type": "serial",
 "theme": "light",
 "legend": {
 "horizontalGap": 0,
 "maxColumns": 1,
 "position": "right",
 "useGraphSettings": true,
 "markerSize": 10,
 'fontSize': 24,
 },
 "dataProvider": data,
 "valueAxes": [
 {
 "id":"v1",
 "stackType": "100%",
 "axisAlpha": 0.3,
 "gridAlpha": 0,
 'fontSize': 24,
 'autoGridCount': false,
 'gridCount': 0,
 "guides": [
 {
 "label": '0',
 "value": '0',
 "toValue": '0'
 },
 
 {
 "label": '20%',
 "value": '20',
 "toValue": '20'
 },
 {
 "label": '40%',
 "value": '40',
 "toValue": '40'
 },
 {
 "label": '60%',
 "value": '60',
 "toValue": '60'
 },
 {
 "label": '80%',
 "value": '80',
 "toValue": '80'
 },
 {
 "label": '100%',
 "value": '100',
 "toValue": '100'
 }
 ]
 },
 {
 "id":"v2",
 "stackType": "100%",
 "axisAlpha": 0.3,
 "gridAlpha": 0,
 'fontSize': 24,
 'autoGridCount': false,
 'gridCount': 0
 }
 ],
 "graphs": [
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#f79646',
 "title": "A",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v1',
 "valueField": "A"
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#ffcc00',
 "title": "B",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v1',
 "valueField": "B"
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#4bacc6',
 "title": "C",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v1',
 "valueField": "C"
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#558ed5',
 "title": "D",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v1',
 "valueField": "D"
 },
 
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.5,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#f79646',
 "title": "年级 A",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v2',
 "valueField": "A2",
 "visibleInLegend":false
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.5,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#ffcc00',
 "title": "年级 B",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v2',
 "valueField": "B2",
 "visibleInLegend":false
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.5,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#4bacc6',
 "title": "年级 C",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v2',
 "valueField": "C2",
 "visibleInLegend":false
 },
 {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.5,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 'lineColor': '#558ed5',
 "title": "年级 D",
 "type": "column",
 "color": "#000000",
 'fontSize': 16,
 'valueAxis': 'v2',
 "valueField": "D2",
 "visibleInLegend":false
 }
 ],
 "categoryField": "kemu",
 "categoryAxis": {
 "gridPosition": "start",
 "axisAlpha": 0,
 "gridAlpha": 0,
 "position": "left",
 'fontSize': 24,
 },
 "export": {
 "enabled": true
 }
 }

2.横向柱状叠加图

![70 1][]

核心代码：

//叠加柱状图
 var amOptions = {
 "type": "serial",
 "theme": "light",
 "legend": {
 "horizontalGap": 10,
 "maxColumns": 1,
 "position": "right",
 "useGraphSettings": true,
 "markerSize": 10,
 'fontSize': 24,
 },
 "dataProvider": data,
 "valueAxes": [{
 "stackType": "100%",
 "axisAlpha": 0,
 "gridAlpha": 0.5,
 'autoGridCount': false,
 'gridCount': 0,
 'fontSize': 24,
 }],
 "graphs": [{
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 "title": "A水平",
 "type": "column",
 "color": "#000000",
 "valueField": "A",
 "fillColorsField": "Acolor",
 'lineColor': '#548235',
 'fontSize': 16,
 }, {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 "title": "B水平",
 "type": "column",
 "color": "#000000",
 "valueField": "B",
 "fillColorsField": "Acolor",
 'lineColor': '#a9d18e',
 'fontSize': 16,
 }, {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 "title": "C水平",
 "type": "column",
 "color": "#000000",
 "valueField": "C",
 "fillColorsField": "Acolor",
 'lineColor': '#c5e0b4',
 'fontSize': 16,
 }, {
 "balloonText": "[[title]] [[category]]: [[value]]",
 "fillAlphas": 0.8,
 "labelText": "[[value]]%",
 "lineAlpha": 0.3,
 "title": "D水平",
 "type": "column",
 "color": "#000000",
 "valueField": "D",
 "fillColorsField": "Acolor",
 'lineColor': '#e2f0d9',
 'fontSize': 16,
 }],
 "rotate": true,
 "categoryField": "classname",
 "categoryAxis": {
 "gridPosition": "start",
 "axisAlpha": 0,
 "gridAlpha": 0,
 "position": "left",
 'fontSize': 24,
 },
 "export": {
 "enabled": true
 }
 }

3.一些重要的属性：

rotate：是否旋转（横向/竖向）

valueAxes：y轴的值

categoryAxis：x轴的值

"labelText": "\[\[value\]\]%",显示百分号

另外如果显示的字体大于一个柱子的宽度，就会消失，可以适当调小即可

[70]: /images/20220509/3c4760f783d3490fb85e4604ce6a7db6.png
[70 1]: /images/20220509/be63e9d5931f44748af462479f06b2d5.png