Как передать данные из переменных PHP в графики Apex Charts (JS)?

Question

[Андрей Романов]

Доброго времени суток. У меня есть массив с данными, я хочу их их использовать в графике.
Выбрал Apex Chart, создал объект, сам график работает, но не знаю как мне подставить значения из PHP в скрипт JS Apex'a, который я присоединяю. Подскажите пожалуйста как правильно передать переменные из PHP в JS скрипт ?

Спасибо.

Comments

[Андрей Романов]

TheAndrey7, можно пожалуйста пример ?

Answer 1

[maddog670]

<?php
    $arr = [1,2,3,5,6];
    $json = json_encode ( $arr,  JSON_FORCE_OBJECT );
?>

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var json = jQuery.parseJSON ("<?php echo $json; ?>" );
</script>

Comments

[Андрей Романов]

Спасибо вам за отклик, ошибка в консоле

Uncaught SyntaxError: Unexpected token + in JSON at position 1
    at Function.parse [as parseJSON] (<anonymous>)

[maddog670]

Андрей Романов, покажите код

[ThunderCat]

var json = jQuery.parseJSON ("<?php echo $json; ?>" );

Екскузе муа, а зачем парсить готовый объект?

[Андрей Романов]

maddog670,

var options = {
      series: [{
      name: 'Рост',
      data: topcoins, # здесь хочу подставить массив с числами
    }],
      chart: {
      height: 350,
      type: 'bar',
    },
    plotOptions: {
      bar: {
        borderRadius: 10,
        dataLabels: {
          position: 'top', // top, center, bottom
        },
      }
    },
    dataLabels: {
      enabled: true,
      formatter: function (val) {
        return val + "%";
      },
      offsetY: -20,
      style: {
        fontSize: '12px',
        colors: ["#304758"]
      }
    },
    
    xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      position: 'top',
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      crosshairs: {
        fill: {
          type: 'gradient',
          gradient: {
            colorFrom: '#D8E3F0',
            colorTo: '#BED1E6',
            stops: [0, 100],
            opacityFrom: 0.4,
            opacityTo: 0.5,
          }
        }
      },
      tooltip: {
        enabled: true,
      }
    },
    yaxis: {
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false,
      },
      labels: {
        show: false,
        formatter: function (val) {
          return val + "%";
        }
      }
    
    },
    title: {
      text: 'Текст графика',
      floating: true,
      offsetY: 330,
      align: 'center',
      style: {
        color: '#444'
      }
    }
    };
    
    var chart = new ApexCharts(document.querySelector("#topcoins"), options);
    chart.render();

массив topcoins в php содержит это

Array
(
    [0] => 124
    [1] => 38
    [2] => 38
    [3] => 31
    [4] => 27
    [5] => 22
    [6] => 20
    [7] => 18
    [8] => 18
    [9] => 16
    [10] => 14
    [11] => 14
)

Answer 2

[Роми]

Нужно:

1 Из JS скрипта сделать GET запрос к PHP скрипту.

2. В PHP скрипте сгенерить данные по образу и подобию: https://apexcharts.com/docs/creating-first-javascr... и отдать в виде ответа (Response)

3 В JS скрипте получить этот ответ и сформировать график

4 PROFIT!!))