Как показать 2-3 AMcharts в одном статическом HTML - PullRequest
Новая
       4

Как показать 2-3 AMcharts в одном статическом HTML

0 голосов
/ 09 января 2019

Для проекта мне нужно отобразить три разных типа AMcharts (круговая, линейчатая, линейная) на одной статической html-странице (не размещенной на сервере) и изменить набор данных всех этих трех с помощью опции меню select.

Например, опции меню могут быть jan, feb, mar, apr, а данные для круговой диаграммы могут быть продуктом a, b, c со значениями 5,10,20 соответственно. Данные для гистограммы могут быть дефектами x, y, x со значениями 300, 400, 260. Точно так же линейный график будет иметь несколько другой набор данных. Все три графика будут представлены рядом и равны по размеру.

Все данные будут закодированы в html / javascript без необходимости подключения к какой-либо базе данных или серверу. Файлы AMcharts js также будут храниться на локальном компьютере, так как вся эта задача - запускаться в автономном режиме. Я буду очень признателен, если можно будет написать простой пример кода. Спасибо всем

1 Ответ

0 голосов
/ 10 января 2019

Я добавляю стартер для вас ниже. Вы можете скопировать этот HTML и сохранить в файле HTML. Вы должны быть в состоянии запустить его оттуда.

Все файлы amCharts загружаются из CDN, поэтому вам не нужно копировать их содержимое.

Каждая диаграмма использует свой собственный идентификатор, и ее код заключен в функцию, поэтому вам не нужно проявлять творческий подход к именам переменных.

Теперь часть кода диаграммы, которую я оставляю с вами. Веселись! 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>amCharts V4 Example - multiple charts</title>

    <style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        background-color: #ffffff;
        overflow: hidden;
        margin: 0;
    }

    .chart {
        width: 100%;
        max-width: 600px;
        height: 100vh;
        max-height: 600px;
    }
    </style>
</head>

<body>

    <!-- Add first chart container -->
    <div id="chart-1" class="chart"></div>

    <!-- Add second chart container -->
    <div id="chart-2" class="chart"></div>

    <!-- Add third chart container -->
    <div id="chart-3" class="chart"></div>

    <!-- Add chart dependencies from CDN -->
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

    <!-- Add the charts -->
    <script>
        // Set the theme
        am4core.useTheme(am4themes_animated);

        // Enclose the code for chart-1
        (function () {

            var chart = am4core.create("chart-1", am4charts.PieChart);

            // Add data
            chart.data = [{
                "country": "Lithuania",
                "litres": 501.9
            }, {
                "country": "Czech Republic",
                "litres": 301.9
            }, {
                "country": "Ireland",
                "litres": 201.1
            }, {
                "country": "Germany",
                "litres": 165.8
            }, {
                "country": "Australia",
                "litres": 139.9
            }, {
                "country": "Austria",
                "litres": 128.3
            }, {
                "country": "UK",
                "litres": 99
            }, {
                "country": "Belgium",
                "litres": 60
            }, {
                "country": "The Netherlands",
                "litres": 50
            }];

            // The chart code comes here

        })();

        // Enclose the code for chart-2
        (function () {

            var chart = am4core.create("chart-2", am4charts.PieChart);

            // The chart code comes here

        })();

        // Enclose the code for chart-3
        (function () {

            var chart = am4core.create("chart-3", am4charts.PieChart);

            // The chart code comes here

        })();
    </script>
</body>

</html>
...