Как использовать элементы массива javascript в графиках google.visualization

Question

Как использовать элементы массива javascript в графиках google.visualization

У меня есть следующий фрагмент кода, который рисует графики в цикле, используя google.visualisation, основываясь на значениях из таблицы SQL, которую я храню в 3 массивах (т.е. $TotalView, $TotalFemaleView а также $TotalMaleView) в части PHP. Я использую json_encode (указано этот ссылка), поэтому я могу использовать эти массивы в JavaScript. Но я не могу получить доступ к элементам массива для рисования графиков. Я попытался отобразить значения массивов, и они верны.

<?php
$servername = "localhost";
$username = "root";
$password = "root123";
$dbname = "test";

$AdName=[];
$TotalView=[];
$TotalMaleView=[];
$TotalFemaleView=[];
$rowcount=0;

// Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}

$result=mysqli_query($con,"SELECT `Ad Name`,`Total View Count`, `Total Female Viewers`, `Total Male Viewers` FROM `addata` WHERE `Disp Id`=1");

$rowcount=mysqli_num_rows($result);

if(!$result) {
die('Could not get data: ' . mysql_error());
}
// output data of each row
for($x = 0; $x < $rowcount; $x++)
{
$row = $result->fetch_assoc();
$TotalView[$x]=$row["Total View Count"];
$TotalFemaleView[$x]=$row["Total Female Viewers"];
$TotalMaleView[$x]=$row["Total Male Viewers"];
$AdName[$x]=$row["Ad Name"];
}

$con->close();
?>
<html>
<body>

<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="stats"></ul>
<script type="text/javascript">

var array1 = <?php echo json_encode($TotalView);?>;
var array2 = <?php echo json_encode($TotalFemaleView);?>;
var array3 = <?php echo json_encode($TotalMaleView);?>;
var array4 = <?php echo json_encode($AdName);?>;

google.charts.load('current',
{ callback: function ()
{
for ( y = 0; y < <?php echo $rowcount ?>; y++)
{

var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Viewers');
data.addRows([
['TotalViewers',array1[y]],
['Female Viewers', array2[y]],
['Male Viewers', array3[y]]
]);
var options = {title:array4[y],width:400,height:300};

var container = document.getElementById('stats').appendChild(document.createElement('div'));
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
}
},
packages: ['corechart']
});

</script>
</body>

</html>

Кто-нибудь может указать мне правильное направление?

2

google-chartwrapper google-visualization html javascript php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Основываясь на информации в ваших комментариях и обновленном PHP-коде, кажется, что ваши данные, возвращаемые из запросов к базе данных, имеют числа в виде строк. Перед использованием Eval () или Javascript Число объект, если вы смотрели в консоли браузера, то вы могли видеть ошибки, подобные этой:

Uncaught Error: Несоответствие типов. Значение 12 не соответствует номеру типа в столбце индекса 1

Есть несколько вариантов решения этой проблемы (без использования Eval ()):

Тип актерского состава значения как целое число или же поплавок при добавлении в выходные массивы в PHP
```
$TotalView[$x] = (float)$row["Total View Count"];
```
использовать JSON_NUMERIC_CHECK пометка с помощью json_encode (см. этот ответ для получения дополнительной информации).
```
var array1 = <?php echo json_encode($TotalView, JSON_NUMERIC_CHECK );?>;
```
Но будьте осторожны, есть недостатки в использовании этой константы (см. Эта статья для примера).

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

Пожалуйста, запустите эту скрипку и проверьте вывод в консоли браузера. Обратите внимание, как результаты json_encode () создать допустимые массивы в Javascript, например:

var array1 = [12,10,6];
var array2 = [8,4,1];
var array3 = [4,6,5];
var array4 = ["Audi","BMW","Suzuki"];

Интересно, что тег неупорядоченного списка (т.е. <ul id="stats">), который считается содержание потока, добавляется в метка головы в вашем примере кода. Заголовок только позволяет содержание метаданных. Переместить этот неупорядоченный тег списка в тег тела.

Смотрите результаты, показанные во фрагменте ниже.

var array1 = [22, 16, 35, 11];
var array2 = [10, 3, 4, 9];
var array3 = [12, 13, 31, 2];

google.charts.load('current', {
callback: function() {
for (var y = 0; y < array1.length; y++) {

var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Viewers');
data.addRows([
['TotalViewers', array1[y]],
['Female Viewers', array2[y]],
['Male Viewers', array3[y]]
]);
var options = {
title: 'Ad 1',
width: 400,
height: 300
};
var container = document.getElementById('stats').appendChild(document.createElement('div'));
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
}
},
packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="stats"></ul>

1

Другие решения

Хорошо, я решил это. Пришлось передавать массивы в функцию eval (), прежде чем использовать их в функции google.visualization.

google.charts.load('current',
{ callback: function ()
{
for ( y = 0; y < <?php echo $rowcount ?>; y++)
{
array1[y]=eval(array1[y]);
array2[y]=eval(array2[y]);
array3[y]=eval(array3[y]);

var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Viewers');
data.addRows([
['TotalViewers',array1[y]],
['Female Viewers', array2[y]],
['Male Viewers', array3[y]]
]);
var options = {title:array4[y],width:400,height:300};

var container = document.getElementById('stats').appendChild(document.createElement('div'));
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
}
},
packages: ['corechart']
});

РЕДАКТИРОВАТЬ:

Я нашел то, что вызывало проблему и лучшее решение для eval ().

json_encode хранил элементы в виде строк в массивах (как вы можете видеть из моего источника Вот).

В соответствии с этот, это специфичная для версии PHP проблема, и есть несколько обходных путей:

Добавление флага JSON_NUMERIC_CHECK к json_encode функция. Так
в моем случае это будет: var array1 = <?php echo json_encode($TotalView,JSON_NUMERIC_CHECK);?>, Но это, согласно некоторым комментариям, ненадежно в определенный случаев.
Другое решение — исправить это в разделе PHP при чтении элементов базы данных из базы данных. $TotalView[$x]=(int)$row['Total View Count'], Так
это хранит элемент базы данных, Total View Count как целое число в
TotalView массив.

0

Источник