0
Ich versuche, 3 Diagramme auf dieser Seite anzuzeigen. 2 der 3 perfekt angezeigt, stellte ich eine andere Frage, da ich dachte, dass das Problem mit der Syntax des 2. Diagramms (Kegel) zusammenhing, aber ein freundlicher Benutzer darauf hinwies, dass die Syntax dort laut ist, so stelle ich leider zurück mit vollem auf Syntax und hoffentlich kann mir jemand die Auflösung präsentieren, damit alle 3 Diagramme auf meiner Seite angezeigt werden.Chart.JS Chart wird nicht generiert
und die genauen Fehler, den ich erhalten sind:
Uncaught type error. Can not read property 'data' of undefined.
Auf dieser Linie data: sb }] und die roten X in der Entwickler-Konsole ist direkt nach den]
<?php
$option = array();
$option['driver'] = 'mssql';
$option['host'] = 'Server';
$option['user'] = 'User';
$option['password'] = 'Pass';
$option['database'] = 'DB';
$option['prefix'] = '';
$db = JDatabaseDriver::getInstance($option);
$sql = $db->getQuery(true);
$sql = "Select * from green";
$db->setQuery($sql);
$rows = $db->loadRowList();
$output = array();
foreach ($rows as $row) {
array_push($output, $row);
}
$data = json_encode($output[0]);
$sql = "Select * from alpha";
$db->setQuery($sql);
$rows = $db->loadRowList();
$newoutput = array();
foreach ($rows as $row) {
array_push($newoutput, $row);
}
$newop = json_encode($newoutput[0]);
$sql = "Select * from jibjab";
$db->setQuery($sql);
$rows = $db->loadRowList();
$joc = array();
foreach ($rows as $row) {
array_push($joc, $row);
}
$yoytr = json_encode($joc[0]);
?>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<style>
.doublecolumn { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;}
</style>
<body>
<h1><?php echo $paramname; ?> Place Header Here</h1>
<div class="doublecolumn">
<div id="container" style="width: 100%;"><canvas width:="100px;" id="canvas"></canvas></div>
<div id="containerone" style="width: 100%;"><canvas width:="100px;" id="cone"></canvas></div></div>
<script>
"use strict";
var jsondata = <?php echo $data; ?>;
var values = [];
for (var i = 0; i < jsondata.length; i++) {
values.push(jsondata[i]);
}
var jdata1 = <?php echo $newop; ?>;
var values1 = [];
for (var i = 0; i < jdata1.length; i++) {
values1.push(jdata1[i]);
}
var jdata2 = <?php echo $yoytr; ?>;
var yoyvalues = [];
for (var i = 0; i < jdata2.length; i++) {
yoyvalues.push(jdata2[i]);
}
var mainlabels = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var salesbyperson = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: mainlabels,
datasets: [{
label: 'First',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: salesbyperson
}]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
}
});
var ml = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var sb = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('cone').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ml,
datasets: [{
label: 'Sum of Sales',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: sb
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
},
plugins: [{
beforeDraw: function(chart) {
var labels = chart.data.labels;
labels.forEach(function(e, i) {
var bar = chart.data.datasets[0]._meta['0'].data[i]._model;
var dataPoint = e.split(/\s/)[1];
if (dataPoint === '12')
bar.backgroundColor = 'blue';
else if (dataPoint === '13')
bar.backgroundColor = 'green';
});
}
}]
});
</script>
<h1><?php echo $paramname; ?> Place Header Here</h1>
<div id="containerGPPercent" style="width: 50%;"><canvas width:="100px;" id="cavasme"></canvas></div>
<script>
var m2 = ["Jose 12", "Jose 13", "Jay 12", "Jay 13", "Rob 12", "Rob 13"];
var sb1 = [21, 31, 21, 16, 22, 24];
var ctx = document.getElementById('cavasme').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: m2,
datasets: [{
type: 'line',
fill: false,
label: 'Gross Profit',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: sb1,
yAxisID: 'y-axis-1'
}, {
label: 'Total Revenue',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: sb
}]
},
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}, {
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + '%';
}
}
}]
}
}
});
</script>
</body>
</html>
</body>
</html>
{/source}
es ist nur interne Website, so leider nicht. Ich kann Screenshot - Was müssen Sie sehen? –
Konsole log was speziell? –
, wenn es zeigt die Fehler –