Amcharts

Question

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

我面临如下问题-

该栏不可读，因为类别标签和值栏重叠。我希望它们与类别标签分开，位于值栏上方，使它们更具可读性。我该怎么做？
条之间的间距非常小如何增加条之间的间距以使其更具可读性？

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

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

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
  }
  } );

#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;
}

<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>

Answer 1

该方法在很大程度上与相同。唯一的区别是，您需要调整图表设置，使带有标签的隐藏标签列在响应规则启动时可见，但默认情况下将其隐藏以适应更大的屏幕尺寸。

  "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"
  },
  // ...

编辑

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

编辑 #2 - 添加了 addDefaultRules: false 到响应式插件。默认规则在较小的屏幕上隐藏值标签。您可以删除默认规则或重新定义并覆盖取消设置的规则 showAllValueLabels

下面的演示 - 单击调整图表大小按钮触发规则

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";
  }
});

#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;
}

<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>

编辑 3

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

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

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

Amcharts - Column Chart to rotate to horizontal bar chart below 600px - styling issues

javascript