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

Question

我正在尝试使用它旋转的功能制作amchart图，并在screenwidth小于766px时变为水平。如果screenwidth小于766 px，则值轴应位于顶部，类别轴应位于左侧

我添加了这个脚本链接 -

<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"
            }
        }
    }]
},

但它仍然不起作用。在减小屏幕宽度小于766px时，图表不会恢复为水平。请告诉我我做错了什么。我不想使用Jquery，我是javascript的新手。如果您能在jsfiddle或片段中显示，我们将不胜感激。

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

＆＃13;

＆＃13;

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

});

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

responsive.min.js的网址不正确。尝试添加一个正确的，然后它应该工作。这是工作小提琴：https://jsfiddle.net/fvurj0xg/1/