Question

我正在尝试制作Amcharts图表，这将是一个柱形图，移动和平板电脑的屏幕宽度（小于600px）将旋转并成为一个水平条形图

我面临以下一些问题 -

由于类别标签和值栏重叠，因此栏不可读。我希望它们与类别标签分开，使其高于值栏，以使它们更具可读性。我怎么能这样做？
栏之间的间距非常小我如何增加栏之间的间距以使它们更具可读性？

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

这是我的codepen - https://codepen.io/anon/pen/pWMorr，这是我的代码段 -

＆＃13;

var chart = AmCharts.makeChart( "chartdiv", {
    "type": "serial",
	"theme": "light",
  "addClassNames": true,
  "marginRight": 70,
  "panEventsEnabled": false,
  "titles": [{
    "text": "Click on Country to see Visitor details"
  }],
     "dataProvider": [
      {
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00",
    "url": "https://codepen.io/"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600",
    "url": "https://codepen.io/"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01",
    "url": "https://codepen.io/"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202",
    "url": "https://codepen.io/"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01",
    "url": "https://codepen.io/"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09",
    "url": "https://codepen.io/"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215",
    "url": "https://codepen.io/"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF",
    "url": "https://codepen.io/"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1",
    "url": "https://codepen.io/"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0",
    "url": "https://codepen.io/"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF",
    "url": "https://codepen.io/"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74",
    "url": "https://codepen.io/"
  }
  ],
    "responsive": {
    "enabled": true,
	"rules": [
	{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
		"creditsPosition": "bottom-right",
		 "columnSpacing": 20,
		"minMarginLeft": 38,
		   "depth3D": 0,
		"angle": 0,
		"legend": {
			"enabled": true,
			"useGraphSettings": true,
			"labelText": "Country",
			"fontSize": 14
		},
		"categoryAxis": {
			"inside": true,
			"fontSize": 13,
			"gridPosition": "start",
			"startOnAxis": true,
			"gridAlpha": 0,
			"minVerticalGap": 5
		}
      }
    }
	]
  },
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "No. of Visitors"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
	"fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
	"urlField": "url",
	"urlTarget": "_blank",
    "valueField": "visits"
  }],
  "depth3D": 10,
	"angle": 45,
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
	"classNameField": "Ctglabel",
	"labelRotation": 45,
	"minHorizontalGap": 50,
	"title": "Country",
	"urlTarget": "_blank",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
		window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }]
  },
  "export": {
    "enabled": true
  }
  } );

＆＃13;

#chartdiv {
  width: 100%;
  height: 500px;
}
g.amcharts-category-axis tspan {
    cursor: pointer;
}
g.amcharts-category-axis text.amcharts-axis-label tspan:hover {
	text-decoration: underline;
	fill: red;
}
text.amcharts-axis-title {
    font-size: 13px;
}

＆＃13;

<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>
<script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.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

该方法与the previous answer I gave大致相同。唯一的区别是，您需要调整图表设置，以便在响应规则启动时使标签显示隐藏的仅标签列，但默认情况下会将其隐藏为更大的屏幕尺寸。

  "responsive": {
    "enabled": true,
    "addDefaultRules": false, //add this so that the value labels still appear on even smaller screens
    "rules": [{
      "maxWidth": 600,
      "overrides": {
        "rotate": true,
        "creditsPosition": "bottom-right",
        "columnSpacing": 5,
        "minMarginLeft": 38,
        "depth3D": 0,
        "angle": 0,
        "graphs": [{
           "hidden": false //reveal the label-only column chart
        }, {
           "columnWidth": 1 //make this slightly larger to help with spacing
        }],
        "legend": {
          "enabled": true,
          "useGraphSettings": true,
          "labelText": "Country",
          "fontSize": 14
        },
        "categoryAxis": {
          "labelsEnabled": false, //remove the axis label and tick 
          "tickLength": 0
        }
      }
    }]
  },
  "graphs": [{ //invisible label only graph
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "hidden": true, //hide by default for larger screen sizes
    "columnWidth": .6,
    "visibleInLegend": false,
   "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },
  // ...

修改

要保留在取出类别轴标签时删除的链接标签点击，您需要将urlField和urlTarget添加到不可见图表中。由于底层SVG的结构如何，您不能对标签文本具有相同的悬停效果，但您可以将它们设置为红色并默认通过CSS加下划线。您还需要使隐藏图形使用足够大的值，以便标签占用的空间是可点击的。一个不错的选择是使用数据集中的最大值。您还可以将includeInMinMax设置为false，以便隐藏值不会影响轴缩放。

编辑＃2 - 将addDefaultRules: false添加到自适应插件中。默认规则会在较小的屏幕上隐藏值标签。您可以删除默认规则，也可以重新定义并覆盖取消设置showAllValueLabels
的规则
下面的演示 - 单击调整大小图表按钮以触发规则

＆＃13;
＆＃13;
var chart = AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "light", "addClassNames": true, "marginRight": 70, "panEventsEnabled": false, "titles": [{ "text": "Click on Country to see Visitor details" }], "dataProvider": [{ "country": "USA", "visits": 3025, "hiddenvalue": 3025, // to ensure that the smaller bars' labels are fully clickable "color": "#FF0F00", "url": "https://codepen.io/" }, { "country": "China", "visits": 1882, "hiddenvalue": 3025, "color": "#FF6600", "url": "https://codepen.io/" }, { "country": "Japan", "visits": 1809, "hiddenvalue": 3025, "color": "#FF9E01", "url": "https://codepen.io/" }, { "country": "Germany", "visits": 1322, "hiddenvalue": 3025, "color": "#FCD202", "url": "https://codepen.io/" }, { "country": "UK", "visits": 1122, "hiddenvalue": 3025, "color": "#F8FF01", "url": "https://codepen.io/" }, { "country": "France", "visits": 1114, "hiddenvalue": 3025, "color": "#B0DE09", "url": "https://codepen.io/" }, { "country": "India", "visits": 984, "hiddenvalue": 3025, "color": "#04D215", "url": "https://codepen.io/" }, { "country": "Spain", "visits": 711, "hiddenvalue": 3025, "color": "#0D8ECF", "url": "https://codepen.io/" }, { "country": "Netherlands", "visits": 665, "hiddenvalue": 3025, "color": "#0D52D1", "url": "https://codepen.io/" }, { "country": "Russia", "visits": 580, "hiddenvalue": 3025, "color": "#2A0CD0", "url": "https://codepen.io/" }, { "country": "South Korea", "visits": 443, "hiddenvalue": 3025, "color": "#8A0CCF", "url": "https://codepen.io/" }, { "country": "Canada", "visits": 441, "hiddenvalue": 3025, "color": "#CD0D74", "url": "https://codepen.io/" }], "responsive": { "enabled": true, "rules": [{ "maxWidth": 600, "overrides": { "rotate": true, "creditsPosition": "bottom-right", "columnSpacing": 5, "minMarginLeft": 38, "depth3D": 0, "angle": 0, "graphs": [{ "hidden": false }, { "columnWidth": 1 }], "legend": { "enabled": true, "useGraphSettings": true, "labelText": "Country", "fontSize": 14 }, "categoryAxis": { "labelsEnabled": false, "tickLength": 0 } } }] }, "valueAxes": [{ "axisAlpha": 0, "position": "left", "title": "No. of Visitors" }], "startDuration": 1, "graphs": [{ "labelText": "[[category]]", "labelPosition": "inside", "id": "label-only", "showBalloon": false, "fillAlphas": 0, "lineAlpha": 0, "hidden": true, //hide by default for larger screen sizes "columnWidth": .6, "visibleInLegend": false, "showAllValueLabels": true, "type": "column", "urlField": "url", "urlTarget": "_blank", "valueField": "hiddenvalue", //use hidden value to make labels clickable "includeInMinMax": false //make sure the graph doesn't affect the value axis min/max when zooming. }, { "balloonText": "[[category]]: <b>[[value]]</b>", "fillColorsField": "color", "fillAlphas": 0.9, "lineAlpha": 0.2, "type": "column", "urlField": "url", "urlTarget": "_blank", "valueField": "visits" }], "depth3D": 10, "angle": 45, "chartCursor": { "categoryBalloonEnabled": false, "cursorAlpha": 0, "zoomable": false }, "categoryField": "country", "categoryAxis": { "gridPosition": "start", "classNameField": "Ctglabel", "labelRotation": 45, "minHorizontalGap": 50, "title": "Country", "urlTarget": "_blank", "listeners": [{ "event": "clickItem", "method": function(event) { window.open(event.serialDataItem.dataContext.url, '_blank'); } }] }, "export": { "enabled": true } }); document.getElementById('resize').addEventListener('click', function(e) { if (e.currentTarget.dataset.resized === "no") { document.getElementById("chartdiv").style.width = "500px"; e.currentTarget.dataset.resized = "yes"; } else { document.getElementById("chartdiv").style.width = "100%"; e.currentTarget.dataset.resized = "no"; } });
＆＃13;
#chartdiv { width: 100%; height: 500px; } g.amcharts-category-axis tspan { cursor: pointer; } g.amcharts-category-axis text.amcharts-axis-label tspan:hover, g.amcharts-graph-label-only text tspan { text-decoration: underline; fill: red; } text.amcharts-axis-title { font-size: 13px; }
＆＃13;
<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> <script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <button id="resize" data-resized="no">Resize chart</button> <div id="chartdiv"></div>
＆＃13;
＆＃13;
＆＃13;

编辑3

另一个解决方案是使用CSS @media查询来增加图表高度，以便在响应规则触发旋转时扩展条形高度。例如：

@media screen and (max-width: 480px) { #chartdiv { width: 100%; height: 700px; } }

Amcharts - 柱形图旋转到600px以下的水平条形图 - 样式问题

1 个答案: