Diagramm Amcharts - Diagramm mit geringerer Bildschirmbreite in horizontaler Richtung drehen

Question

Ich versuche Amchart Graph mit Funktion zu machen, dass es sich dreht und horizontal wird, wenn die Bildschirmbreite weniger als 766 Pixel beträgt. Wenn Screen weniger als 766 Pixel ist, Wert Achsen sollten sollte auf der linken Seite

ich diesen Skript Link hinzugefügt werden oben und Kategorie Achsen sein -

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

und fügte auch diesen Code auf den amCharts API-Code -

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

Aber immer noch nicht funktioniert. Bei abnehmender Bildschirmbreite von weniger als 766 Pixel wird das Diagramm nicht in den horizontalen Bereich zurückgesetzt. Bitte sag was ich falsch mache. Ich möchte Jquery nicht verwenden und ich bin neu in Javascript. Würde mich freuen, wenn Sie in einem Spiel oder einem Schnipsel zeigen können.

Das ist mein jsfiddle ist - https://jsfiddle.net/fvurj0xg/ und unten ist mein Snippet -

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "addClassNames": true, 
 
\t "responsive": { 
 
    "enabled": true, 
 
\t "addDefaultRules": false, 
 
\t "rules": [ 
 
\t { 
 
     "maxWidth": 766, 
 
     "overrides": { 
 
     "rotate": true, 
 
\t \t \t \t "categoryAxis": { 
 
\t \t "position": "left" 
 
\t }, 
 
\t \t \t \t "valueAxes": { 
 
     "position": "top" 
 
    } 
 
     } 
 
    } 
 
\t ] 
 
    }, 
 
    "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) { 
 
\t \t \t \t var url = event.serialDataItem.dataContext.url; 
 
\t \t \t \t 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> \t \t \t \t \t

Answer 1

die URL responsive.min.js ist nicht korrekt. Versuchen Sie, eine richtige hinzuzufügen, dann sollte es funktionieren. Hier die Arbeitsgeige: https://jsfiddle.net/fvurj0xg/1/