Question

我正在尝试制作移动和平板电脑屏幕宽度（小于766像素）的Amcharts条形图

我面临以下一些问题 -

由于我使用的是免费版本的amcharts，因此必须通过amcharts＆＃34;保留＆＃34; Js图表。图表中的链接。只有它出现在图表左侧与我的标签重叠。如何将其移至右侧和底部？
我希望类别标签位于值栏之上，以使其更具可读性。我怎么能这样做？
我想增加条形之间的间距以使它们更具可读性，如果用户想要点击它们，它们可以轻松点击预定的条形图。

我不想使用Jquery，我是javascript的新手。如果您能在jsfiddle或片段中显示，我们将不胜感激。

这是我的jsfiddle - http://jsfiddle.net/brpjwf8m/，下面是我的代码段 -

＆＃13;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "rotate": true,
  "columnWidth": 0.4,
  "depth3D": 0,
	"angle": 0,
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
        "inside": true,
        "startOnAxis": true,
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }

});

＆＃13;

#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}

＆＃13;

<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

＆＃13;

Answer 1

您可以更改积分＆＃39;通过在图表配置中设置creditsPosition来确定位置。 top-left是默认设置，但您也可以使用top-right，bottom-left和bottom-right。

在条形图顶部设置类别标签的唯一方法是使用将labelText设置为"[[category]]"且labelPosition设置为inside的不可见图表对于旋转的条形图。例如：

  "graphs": [{
     // invisible graph for the label
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "visibleInLegend": false,
    "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },
  //regular graph follows
  ]

在添加虚拟数据之外，没有多少方法可以更改列之间的空间，这会使您的列更小。由于您正在利用空列，因此您只需将全局columnWidth设置为1并调整不可见图形columnWidth即可使其变小，并通过设置将两者更接近columnSpacing为0可以将事物稍微改变一点，使其间隔更大/更大。

演示如下：

＆＃13;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "rotate": true,
  "columnSpacing": 0,
  "columnWidth": 1,
  "creditsPosition": "bottom-right",
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "columnWidth": .6,
    "visibleInLegend": false,
   "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
   
    "labelsEnabled": false,
    "tickLength": 0,
    "color": "#1e1e1e",
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }

});

＆＃13;

#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}

＆＃13;

<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

＆＃13;

Amcharts - 移动设备的水平条形图

1 个答案: