1

Есть график,отлично строится, все работает.

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: ['2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',],
    datasets: [{ 
        data: [181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,],
        label: "Карпы",
        borderColor: "#3e95cd",
        fill: false
      },  
      { 
        data: [100,14,16,247],
        label: "Пескари",
        borderColor: "#333333",
        fill: false
      }
    ]
  }
});

Формирую данные на сервере

$X_date="";
            $Y_du="";
                while($row = $STH->fetch()) {  
                    $X_date.="'".$row['date']."',";
                    $Y_du.=$row['new_users_count'].",";
                    }   

                        echo $data ;
        echo json_encode(array('X_date'=>$X_date, 'Y_dau'=>$Y_dau));

Строю график на основе данных

$.ajax({
          type: "POST",
          dataType:'json',
          url: "serverscript/output.php",
          success: function(json) {
            console.log(json.X_date);
            new Chart(document.getElementById("line-chart"), {
                  type: 'line',
                  data: {
                    labels: [json.X_date],
                    datasets: [{ 
                        data: [json.Y_dau],
                        label: "Карпы",
                        borderColor: "#3e95cd",
                        fill: false
                      }
                    ]
                  }
                })
          },
          error: function() {
            console.log("ERROR", this);
          }
        }); 

Криво и не работает, вставляю в ручную данные из echo json_encode(array('X_date'=>$X_date, 'Y_du'=>$Y_du)); все работает,код выше нет. В первом куске кода данные как раз формата ,что выводятся на php я их просто вручную вставил для проверки и все работает

Понимаю,что косяк тут,но где именно не понимаю

               data: {
                        labels: [json.X_date],
                        datasets: [{ 
                            data: [json.Y_dau],
                            label: "Карпы",
                            borderColor: "#3e95cd",
                            fill: false
                          }

Вот так в консоли выглядит

console.log("X_date"+json.X_date);
    console.log("Y_dau"+json.Y_dau);

X_date'2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',

Y_dau181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,


console.log("json.X_date", typeof json.X_date, json.X_date);
console.log("json.Y_du", typeof json.Y_dau, json.Y_dau);

json.X_date string '2018-10-01','2018-10-02','2018-10-03','2018-10-04','2018-10-05','2018-10-06','2018-10-07','2018-10-08','2018-10-09','2018-10-10','2018-10-11','2018-10-12','2018-10-13','2018-10-14','2018-10-15','2018-10-16','2018-10-17','2018-10-18','2018-10-19',

json.Y_du string 181,221,222,209,266,649,725,434,249,232,176,271,418,354,189,154,202,187,222,




    $X_date = array();      
                $Y_dau  = array();              
                    while($row = $STH->fetch()) {  
                        array_push($X_date, $row['date']);
                        array_push($Y_dau, $row['new_users_count']);
                        }   

json.X_date object ["2018-10-01", "2018-10-02", "2018-10-03", "2018-10-04", "2018-10-05", "2018-10-06", "2018-10-07", "2018-10-08", "2018-10-09", "2018-10-10", "2018-10-11", "2018-10-12", "2018-10-13", "2018-10-14", "2018-10-15", "2018-10-16", "2018-10-17", "2018-10-18", "2018-10-19"]

json.Y_du object ["181", "221", "222", "209", "266", "649", "725", "434", "249", "232", "176", "271", "418", "354", "189", "154", "202", "187", "222"]
2
  • Попробуйте привести данные в запросе к строке JSON.stringify() 20 окт 2018 в 21:56
  • не помогло,также
    – zkolya
    20 окт 2018 в 21:59

1 ответ 1

2

Потому что Ваши серверные переменные $X_date и $Y_du - не массивы, а конкатенированные строки.

console.log("json.X_date", typeof json.X_date, json.X_date);
console.log("json.Y_dau", typeof json.Y_dau, json.Y_dau);

Что в консоли?

Теперь Вы видите, что обе переменные не массивы, а строки?


Еще мы с Павлом Игоревичем заметили:

в одном месте -

'Y_du'=>$Y_du

в другом -

data: [json.Y_dau],

Y_du или Y_dau?


Если Вы не хотите чинить серверный код (как написано в начале ответа), то можете сделать так:

              data: {
                labels: JSON.parse("["+json.X_date+"]"),
                datasets: [{ 
                    data: JSON.parse("["+json.Y_dau+"]"),
                    label: "Карпы",
                    borderColor: "#3e95cd",
                    fill: false
                  }
                ]
              }

Хотя нет, этого на клиенте недостаточно. Надо делать как следует на серверной стороне.

10
  • Не du, а dau 20 окт 2018 в 22:03
  • @ПавелИгоревич в одном месте - 'Y_du'=>$Y_du, в другом - data: [json.Y_dau],
    – user176262
    20 окт 2018 в 22:05
  • А-а-а-а, а почему в запросе отличается переменная от php? 20 окт 2018 в 22:05
  • Не,С переменными все окей, просто когда копировал,стал править и случайно удалил. В этом проблем проблем нет.В конколи выводит так как надо, формата как нужно
    – zkolya
    20 окт 2018 в 22:10
  • @zkolya Не говорите мне - "выводит как надо". Добавьте в вопрос то, что выводится в консоль, и я Вам скажу, почему выводит неправильно.
    – user176262
    20 окт 2018 в 22:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.