CJSCore::Init(['amcharts']); Битрикс?

Question

[SteepNET]

Добрый день! Хотелось бы использовать диаграммы и графики в Битрикс!
https://dev.1c-bitrix.ru/api_help/js_lib/js-library.php
Тут указано что в комплекте уже идет встроенная лицензия amcharts!
Кроме того ,кроме как подключить ее CJSCore::Init(['amcharts']); ,более ничего нигде не указано и не найдено.
Может кто то использовал сможет дать совет,пример как ее в среде Битрикса использовать?

Answer 1

[Андрей Саврасов]

Примеры кода можно посмотреть тут https://www.amcharts.com/demos/

amcharts - Базовая библиотека
amcharts_funnel – Воронка, пирамида Маслоу
amcharts_gauge – Диаграмма в виде спидометра
amcharts_pie – Круговая диаграмма
amcharts_radar – Радарная диаграмма
amcharts_serial – Обычные графики
amcharts_xy – График XY

Comments

[SteepNET]

Там указаны примеры вне среды Битрикс, и они как то должны лицензированы, тут же с состав Битрикс уже включена лицензия...

Answer 2

[DRusak]

\Bitrix\Main\UI\Extension::load('amcharts4');
\Bitrix\Main\UI\Extension::load('amcharts4_theme_animated');

am4core.ready(function() {
            am4core.useTheme(am4themes_animated);
            var chart = am4core.create("chart1", am4charts.PieChart);
            chart.data = newData;
            ......
            ......
});

Answer 3

[FreeMAN_TEA]

<?php
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
$APPLICATION->SetTitle("Пример amcharts4");

\Bitrix\Main\UI\Extension::load('amcharts4');
\Bitrix\Main\UI\Extension::load('amcharts4_theme_animated');
\Bitrix\Main\UI\Extension::load('amcharts4_lang_ru');

// Формируем массив для JS
//$chartData = [];
//if (!empty($arResult['STATUS']['NAME']) && is_array($arResult['STATUS']['NAME']))
//{
//    foreach ($arResult['STATUS']['NAME'] as $key => $name)
//    {
//        $chartData[] = [
//            'category' => $name,
//            'value' => (int)$arResult['STATUS']['COUNT'][$key]
//        ];
//    }
//}

?>
<h2>График</h2>
<div id="chartdiv" style="width: 100%; height: 500px; background-color: #fff;"></div>


<script>
    (function() {
        // 1. Устанавливаем тему
        if (typeof am4themes_animated !== 'undefined') {
            am4core.useTheme(am4themes_animated);
        }

        // 2. Создаем экземпляр КРУГОВОГО графика
        var chart = am4core.create("chartdiv", am4charts.PieChart);

        // 3. Данные (6 параметров)
        // json_encode превратит массив в правильный формат для amCharts
        //chart.data = <?php //= \Bitrix\Main\Web\Json::encode($chartData) ?>//;
        chart.data = [
            { "category": "Параметр 1", "value": 450 },
            { "category": "Параметр 2", "value": 1200 },
            { "category": "Параметр 3", "value": 850 },
            { "category": "Параметр 4", "value": 1100 },
            { "category": "Параметр 5", "value": 600 },
            { "category": "Параметр 6", "value": 300 }
        ];

        // 4. Создаем серию для круга
        var pieSeries = chart.series.push(new am4charts.PieSeries());
        pieSeries.dataFields.value = "value";
        pieSeries.dataFields.category = "category";

        // 5. Настройка внешнего вида (Цвета Bitrix24 и стиль)

        // Делаем аккуратные скругленные углы у долек
        pieSeries.slices.template.cornerRadius = 6;
        pieSeries.slices.template.stroke = am4core.color("#fff");
        pieSeries.slices.template.strokeWidth = 2;
        pieSeries.slices.template.strokeOpacity = 1;

        // Настройка тултипа
        pieSeries.slices.template.tooltipText = "{category}: [bold]{value}[/] ({value.percent.formatNumber('#.0')}%)";

        // Настройка меток (текст рядом с дольками)
        pieSeries.labels.template.disabled = false; // true, если не нужны подписи снаружи
        pieSeries.ticks.template.disabled = false;

        // Цветовая палитра в стиле Bitrix (голубые и синие оттенки)
        pieSeries.colors.list = [
            am4core.color("#2fc6f6"),
            am4core.color("#55d0e0"),
            am4core.color("#1d75b3"),
            am4core.color("#afeaee"),
            am4core.color("#00b3c7"),
            am4core.color("#3bc8f5")
        ];

        // 6. Добавляем легенду (список параметров снизу)
        chart.legend = new am4charts.Legend();
        chart.legend.position = "bottom";

        // Опционально: делаем "дырку" посередине (Donut Chart)
        // chart.innerRadius = am4core.percent(40);

        // Глобальная функция для перезапуска (нужна для вашего AJAX)
        window.initMyChart = function() {
            chart.invalidateData();
        };
    })();
</script>