1
第一个图表显示中心的正确日期，但第二个没有。
为什么这两组代码有不同的结果？为什么相同的代码会生成两个不同的图表？
var chartData = [{
"mes_ano": "201701",
"indicador_rent": "UP",
"buy": "98",
"indicador_item": "201701-1",
"sales": 137
}, {
"mes_ano": "201701",
"indicador_rent": "SIDE",
"buy": "536",
"indicador_item": "201701-2",
"sales": 927
}, {
"mes_ano": "201701",
"indicador_rent": "DOWN",
"buy": "148",
"indicador_item": "201701-3",
"sales": 449
}, {
"mes_ano": "201701",
"indicador_rent": "INST",
"buy": "255",
"indicador_item": "201701-4",
"sales": 1129
}, {
"mes_ano": "201701",
"indicador_rent": "N/E",
"buy": "1943",
"indicador_item": "201701-5",
"sales": 0
}, {
"mes_ano": "201702",
"indicador_rent": "UP",
"buy": "113",
"indicador_item": "201702-1",
"sales": 158
}, {
"mes_ano": "201702",
"indicador_rent": "SIDE",
"buy": "448",
"indicador_item": "201702-2",
"sales": 753
}, {
"mes_ano": "201702",
"indicador_rent": "DOWN",
"buy": "115",
"indicador_item": "201702-3",
"sales": 365
}, {
"mes_ano": "201702",
"indicador_rent": "INST",
"buy": "212",
"indicador_item": "201702-4",
"sales": 1104
}, {
"mes_ano": "201702",
"indicador_rent": "N/E",
"buy": "1676",
"indicador_item": "201702-5",
"sales": 0
}, {
"mes_ano": "201703",
"indicador_rent": "UP",
"buy": "107",
"indicador_item": "201703-1",
"sales": 147
}, {
"mes_ano": "201703",
"indicador_rent": "SIDE",
"buy": "496",
"indicador_item": "201703-2",
"sales": 862
}, {
"mes_ano": "201703",
"indicador_rent": "DOWN",
"buy": "246",
"indicador_item": "201703-3",
"sales": 769
}, {
"mes_ano": "201703",
"indicador_rent": "INST",
"buy": "252",
"indicador_item": "201703-4",
"sales": 1162
}, {
"mes_ano": "201703",
"indicador_rent": "N/E",
"buy": "1962",
"indicador_item": "201703-5",
"sales": 0
}, {
"mes_ano": "201704",
"indicador_rent": "UP",
"buy": "107",
"indicador_item": "201704-1",
"sales": 149
}, {
"mes_ano": "201704",
"indicador_rent": "SIDE",
"buy": "420",
"indicador_item": "201704-2",
"sales": 755
}, {
"mes_ano": "201704",
"indicador_rent": "DOWN",
"buy": "234",
"indicador_item": "201704-3",
"sales": 658
}, {
"mes_ano": "201704",
"indicador_rent": "INST",
"buy": "251",
"indicador_item": "201704-4",
"sales": 1253
}, {
"mes_ano": "201704",
"indicador_rent": "N/E",
"buy": "1610",
"indicador_item": "201704-5",
"sales": 0
}, {
"mes_ano": "201705",
"indicador_rent": "UP",
"buy": "143",
"indicador_item": "201705-1",
"sales": 225
}, {
"mes_ano": "201705",
"indicador_rent": "SIDE",
"buy": "567",
"indicador_item": "201705-2",
"sales": 970
}, {
"mes_ano": "201705",
"indicador_rent": "DOWN",
"buy": "278",
"indicador_item": "201705-3",
"sales": 790
}, {
"mes_ano": "201705",
"indicador_rent": "INST",
"buy": "248",
"indicador_item": "201705-4",
"sales": 1262
}, {
"mes_ano": "201705",
"indicador_rent": "N/E",
"buy": "1679",
"indicador_item": "201705-5",
"sales": 0
}, {
"mes_ano": "201706",
"indicador_rent": "UP",
"buy": "124",
"indicador_item": "201706-1",
"sales": 215
}, {
"mes_ano": "201706",
"indicador_rent": "SIDE",
"buy": "419",
"indicador_item": "201706-2",
"sales": 752
}, {
"mes_ano": "201706",
"indicador_rent": "DOWN",
"buy": "213",
"indicador_item": "201706-3",
"sales": 649
}, {
"mes_ano": "201706",
"indicador_rent": "INST",
"buy": "325",
"indicador_item": "201706-4",
"sales": 1404
}, {
"mes_ano": "201706",
"indicador_rent": "N/E",
"buy": "2046",
"indicador_item": "201706-5",
"sales": 0
}];
var chart = AmCharts.makeChart("div1", {
"dataProvider": chartData,
"marginLeft": 46,
"type": "serial",
"theme": "light",
"titles": [{
"size": 15,
"text": "Dinner"
}],
"legend": {
"horizontalGap": 10,
"position": "bottom",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"axisAlpha": 0.3,
"gridAlpha": 0,
"labelsEnabled": false,
"gridCount": chartData.length,
"autoGridCount": false
}],
"graphs": [{
"valueField": "buy",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "buy",
"type": "column",
"color": "#000000"
},
{
"valueField": "sales",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "sales",
"type": "column",
"color": "#FF0000"
}
],
"categoryField": "indicador_item",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0.5,
"gridAlpha": 0,
"position": "left",
"fontSize": 15,
"gridCount": chartData.length,
"autoGridCount": false,
"labelRotation": 90,
"marginBottom": 100,
"guides": [{
"category": "201701-1",
"toCategory": "201701-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201701",
"labelRotation": 0
}, {
"category": "201702-1",
"toCategory": "201702-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201702",
"labelRotation": 0
}, {
"category": "201703-1",
"toCategory": "201703-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201703",
"labelRotation": 0
}, {
"category": "201704-1",
"toCategory": "201704-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201704",
"labelRotation": 0
}, {
"category": "201705-1",
"toCategory": "201705-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201705",
"labelRotation": 0
}, {
"category": "201706-1",
"toCategory": "201706-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201706",
"labelRotation": 0
}],
"labelFunction": function(label, item) {
return item.dataContext.indicador_rent;
}
}
});
var chartData = [{
"mes_ano": "201701",
"indicador_rent": "apple",
"buy": "12",
"indicador_item": "201701-1",
"sales": 23
}, {
"mes_ano": "201701",
"indicador_rent": "orange",
"buy": "7",
"indicador_item": "201701-2",
"sales": 16
}, {
"mes_ano": "201701",
"indicador_rent": "potato",
"buy": "32",
"indicador_item": "201701-3",
"sales": 77
}, {
"mes_ano": "201701",
"indicador_rent": "others",
"buy": "111",
"indicador_item": "201701-4",
"sales": 0
}, {
"mes_ano": "201702",
"indicador_rent": "apple",
"buy": "18",
"indicador_item": "201702-1",
"sales": 25
}, {
"mes_ano": "201702",
"indicador_rent": "orange",
"buy": "5",
"indicador_item": "201702-2",
"sales": 12
}, {
"mes_ano": "201702",
"indicador_rent": "potato",
"buy": "32",
"indicador_item": "201702-3",
"sales": 66
}, {
"mes_ano": "201702",
"indicador_rent": "others",
"buy": "112",
"indicador_item": "201702-4",
"sales": 0
}, {
"mes_ano": "201703",
"indicador_rent": "apple",
"buy": "13",
"indicador_item": "201703-1",
"sales": 35
}, {
"mes_ano": "201703",
"indicador_rent": "orange",
"buy": "11",
"indicador_item": "201703-2",
"sales": 24
}, {
"mes_ano": "201703",
"indicador_rent": "potato",
"buy": "39",
"indicador_item": "201703-3",
"sales": 75
}, {
"mes_ano": "201703",
"indicador_rent": "others",
"buy": "97",
"indicador_item": "201703-4",
"sales": 0
}, {
"mes_ano": "201704",
"indicador_rent": "apple",
"buy": "15",
"indicador_item": "201704-1",
"sales": 29
}, {
"mes_ano": "201704",
"indicador_rent": "orange",
"buy": "6",
"indicador_item": "201704-2",
"sales": 15
}, {
"mes_ano": "201704",
"indicador_rent": "potato",
"buy": "42",
"indicador_item": "201704-3",
"sales": 101
}, {
"mes_ano": "201704",
"indicador_rent": "others",
"buy": "81",
"indicador_item": "201704-4",
"sales": 0
}, {
"mes_ano": "201705",
"indicador_rent": "apple",
"buy": "10",
"indicador_item": "201705-1",
"sales": 12
}, {
"mes_ano": "201705",
"indicador_rent": "orange",
"buy": "14",
"indicador_item": "201705-2",
"sales": 50
}, {
"mes_ano": "201705",
"indicador_rent": "potato",
"buy": "43",
"indicador_item": "201705-3",
"sales": 112
}, {
"mes_ano": "201705",
"indicador_rent": "others",
"buy": "105",
"indicador_item": "201705-4",
"sales": 0
}, {
"mes_ano": "201706",
"indicador_rent": "apple",
"buy": "17",
"indicador_item": "201706-1",
"sales": 35
}, {
"mes_ano": "201706",
"indicador_rent": "orange",
"buy": "22",
"indicador_item": "201706-2",
"sales": 43
}, {
"mes_ano": "201706",
"indicador_rent": "potato",
"buy": "35",
"indicador_item": "201706-3",
"sales": 67
}, {
"mes_ano": "201706",
"indicador_rent": "others",
"buy": "219",
"indicador_item": "201706-4",
"sales": 0
}];
var chart = AmCharts.makeChart("div2", {
"dataProvider": chartData,
"marginLeft": 46,
"type": "serial",
"theme": "light",
"titles": [{
"size": 15,
"text": "Product"
}],
"legend": {
"horizontalGap": 10,
"position": "bottom",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"axisAlpha": 0.3,
"gridAlpha": 0,
"labelsEnabled": false,
"gridCount": chartData.length,
"autoGridCount": false
}],
"graphs": [{
"valueField": "buy",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "buy",
"type": "column",
"color": "#000000"
},
{
"valueField": "sales",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "sales",
"type": "column",
"color": "#FF0000"
}
],
"categoryField": "indicador_item",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0.5,
"gridAlpha": 0,
"position": "left",
"fontSize": 15,
"gridCount": chartData.length,
"autoGridCount": false,
"labelRotation": 90,
"marginBottom": 100,
"guides": [{
"category": "201701-1",
"toCategory": "201701-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201701",
"labelRotation": 0
}, {
"category": "201702-1",
"toCategory": "201702-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201702",
"labelRotation": 0
}, {
"category": "201703-1",
"toCategory": "201703-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201703",
"labelRotation": 0
}, {
"category": "201704-1",
"toCategory": "201704-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201704",
"labelRotation": 0
}, {
"category": "201705-1",
"toCategory": "201705-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201705",
"labelRotation": 0
}, {
"category": "201706-1",
"toCategory": "201706-5",
"lineAlpha": 0.5,
"tickLength": 50,
"expand": true,
"label": "201706",
"labelRotation": 0
}],
"labelFunction": function(label, item) {
return item.dataContext.indicador_rent;
}
}
});<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/dataloader/dataloader.min.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<div class="col-md-12" id='div1' style="height: 400px;"></div>
<div class="col-md-12" id='div2' style="height: 400px;"></div>
你可以更新代码的问题？ –
https://jsfiddle.net/picinato/2Lybcx1g/中的代码没有显示给您？ –