Amcharts 图形 - 以较小的屏幕宽度将图表旋转到水平

Question

我正在尝试制作具有当屏幕宽度小于 766px 时旋转并变为水平的功能的 amchart 图表。如果屏幕宽度小于 766 像素，值轴应在顶部，类别轴应在左侧

我添加了这个脚本 link -

<script src="amcharts/plugins/responsive/responsive.min.js" type="text/javascript"></script>

并将此代码添加到 amcharts API 代码中 -

"responsive": {
    "enabled": true,
    "addDefaultRules": false,
    "rules": [{
        "maxWidth": 766,
        "overrides": {
            "rotate": true,
            "categoryAxis": {
                "position": "left"
            },
            "valueAxes": {
                "position": "top"
            }
        }
    }]
},

但是还是不行。当屏幕宽度小于 766 像素时，图表不会恢复为水平。请告诉我我做错了什么。我不想使用 Jquery，而且我是 javascript 的新手。如果您能在 jsfiddle 或片段中展示，我们将不胜感激。

这是我的 jsfiddle - https://jsfiddle.net/fvurj0xg/ 下面是我的代码片段 -

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "addClassNames": true,
 "responsive": {
        "enabled": true,
     "addDefaultRules": false,
     "rules": [{
            "maxWidth": 766,
            "overrides": {
                "rotate": true,
                "categoryAxis": {
                    "position": "left"
                },
                "valueAxes": {
                    "position": "top"
                }
            }
        }]
      },
      "titles": [{
        "text": "Open this demo in a separate window for links to work"
      }],
      "dataProvider": [{
        "country": "USA",
        "visits": 2025,
        "url": "https://codepen.io"
      }, {
        "country": "China",
        "visits": 1882,
        "url": "https://codepen.io"
      }, {
        "country": "Japan",
        "visits": 1809,
        "url": "https://codepen.io"
      }, {
        "country": "Germany",
        "visits": 1322,
        "url": "https://codepen.io"
      }, {
        "country": "UK",
        "visits": 1122,
        "url": "https://codepen.io"
      }, {
        "country": "France",
        "visits": 1114,
        "url": "https://codepen.io"
      }, {
        "country": "India",
        "visits": 984,
        "url": "https://codepen.io"
      }, {
        "country": "Spain",
        "visits": 711,
        "url": "https://codepen.io"
      }, {
        "country": "Netherlands",
        "visits": 665,
        "url": "https://codepen.io"
      }, {
        "country": "Russia",
        "visits": 580,
        "url": "https://codepen.io"
      }, {
        "country": "South Korea",
        "visits": 443,
        "url": "https://codepen.io"
      }, {
        "country": "Canada",
        "visits": 441,
        "url": "https://codepen.io"
      }, {
        "country": "Brazil",
        "visits": 395,
        "url": "https://codepen.io"
      }],
      "valueAxes": [{
          "gridColor": "#FFFFFF",
          "gridAlpha": 0.2,
          "dashLength": 0
      }],
      "gridAboveGraphs": true,
      "startDuration": 1,
      "graphs": [{
          "balloonText": "[[category]]: <b>[[value]]</b>",
          "fillAlphas": 0.8,
          "lineAlpha": 0.2,
          "type": "column",
          "valueField": "visits"
      }],
      "chartCursor": {
          "categoryBalloonEnabled": false,
          "cursorAlpha": 0,
          "zoomable": false
      },
      "categoryField": "country",
      "categoryAxis": {
          "gridPosition": "start",
          "gridAlpha": 0,
          "tickPosition": "start",
          "tickLength": 20,
      "listeners": [{
          "event": "clickItem",
          "method": function(event) {
              var url = event.serialDataItem.dataContext.url; 
              window.open(url, '_blank'); 
          }
      }]
    }

});

#chartdiv {
  width: 100%;
  height: 400px;
}

.amcharts-axis-label {
  cursor: pointer;
}

<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/themes/light.js"></script>
<script src="amcharts/plugins/responsive/responsive.min.js" type="text/javascript"></script>
<div id="chartdiv"></div>

Answer 1

url 到 responsive.min.js 不正确。尝试添加一个正确的然后它应该工作。这里的工作fiddle：https://jsfiddle.net/fvurj0xg/1/

Amcharts 图形 - 以较小的屏幕宽度将图表旋转到水平

Amcharts graph - Rotate chart to horizontal at lesser screen-width

javascript

amcharts