amChartテスト

2021/10/16

<!DOCTYPE html>
<html>
    <head>
        <title>clustered20211016 | amCharts</title>
        <meta name="description" content="chart created using amCharts live editor" />
        
        <!-- amCharts javascript sources -->
        <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
        <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
        

        <!-- amCharts javascript code -->
        <script type="text/javascript">
            AmCharts.makeChart("chartdiv",
                {
                    "type": "serial",
                    "categoryField": "category",
                    "mouseWheelZoomEnabled": true,
                    "rotate": true,
                    "synchronizeGrid": true,
                    "autoMarginOffset": 0,
                    "minMarginRight": 4,
                    "startDuration": 1,
                    "accessible": false,
                    "hideBalloonTime": 144,
                    "precision": 1,
                    "categoryAxis": {
                        "gridPosition": "start"
                    },
                    "chartCursor": {
                        "enabled": true,
                        "categoryBalloonEnabled": false,
                        "categoryBalloonText": ""
                    },
                    "trendLines": [],
                    "graphs": [
                        {
                            "balloonText": "[[title]] of [[category]]:[[value]]",
                            "fillAlphas": 1,
                            "id": "AmGraph-1",
                            "title": "graph 1",
                            "type": "column",
                            "valueField": "column-1"
                        }
                    ],
                    "guides": [],
                    "valueAxes": [
                        {
                            "axisTitleOffset": 0,
                            "id": "ValueAxis-1",
                            "maximum": 100,
                            "minimum": 0,
                            "recalculateToPercents": true,
                            "stackType": "regular",
                            "title": ""
                        }
                    ],
                    "allLabels": [],
                    "balloon": {},
                    "legend": {
                        "enabled": true,
                        "useGraphSettings": true
                    },
                    "titles": [
                        {
                            "id": "Title-1",
                            "size": 15,
                            "text": "サスティナビリティに関連する事柄の認知"
                        }
                    ],
                    "dataProvider": [
                        {
                            "category": "ロハス",
                            "column-1": "24.4"
                        },
                        {
                            "category": "フェアトレード",
                            "column-1": "24.0"
                        },
                        {
                            "category": "SDGs(エスディージーズ:持続可能な開発目標)",
                            "column-1": "21.0"
                        },
                        {
                            "category": "コーポレート・サステナビリティ",
                            "column-1": "7.1"
                        },
                        {
                            "category": "ESG、ESG投資",
                            "column-1": "7.0"
                        },
                        {
                            "category": "エシカル投資",
                            "column-1": "6.7"
                        },
                        {
                            "category": "いずれも知らない",
                            "column-1": "55.3"
                        },
                        {
                            "category": "無回答",
                            "column-1": "0.5"
                        }
                    ]
                }
            );
        </script>
    </head>
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
    </body>
</html>