为什么相同的代码会产生两个不同的图表？

时间：2017-09-01 20:57:31

标签： javascript charts amcharts

第一个图表显示中心的正确日期，但第二个图表没有 为什么这两组代码有不同的结果？

＆＃13;
＆＃13; 
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;
    }
  }

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

View on JSFiddle

1 个答案:

答案 0 :(得分：1)

第二张图表上的

"toCategory"应该是 - ＆gt; "201705-4"

因为数据仅转到 - ＆gt; "indicador_item": "201705-4"

而第一张图表转到 - ＆gt; "indicador_item": "201701-5"

请参阅以下工作代码段...

＆＃13;
＆＃13; 
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": 0,
    "marginBottom": 100,
    "guides": [{
      "category": "201701-1",
      "toCategory": "201701-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201701",

      "labelRotation": 0
    }, {
      "category": "201702-1",
      "toCategory": "201702-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201702",

      "labelRotation": 0
    }, {
      "category": "201703-1",
      "toCategory": "201703-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201703",

      "labelRotation": 0
    }, {
      "category": "201704-1",
      "toCategory": "201704-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201704",

      "labelRotation": 0
    }, {
      "category": "201705-1",
      "toCategory": "201705-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201705",

      "labelRotation": 0
    }, {
      "category": "201706-1",
      "toCategory": "201706-4",
      "lineAlpha": 0.5,
      "tickLength": 50,
      "expand": true,
      "label": "201706",

      "labelRotation": 0
    }],
    "labelFunction": function(label, item) {
      return item.dataContext.indicador_rent;
    }
  }

});
＆＃13; 
<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>TEST</div>
<div class="col-md-12" id='div2' style="height: 400px;"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题