我试图在此页面上显示 3 个图表。 3 个中的 2 个显示完美，我问了一个不同的问题，因为我认为该问题与第二个图表(锥体)的语法有关，但是一位友好的用户指出该语法是健全的，所以唉，我发回完整的语法，希望有人可以向我提供在我的页面上显示所有 3 个图表的解决方案。
我收到的确切错误是:
Uncaught type error. Can not read property 'data' of undefined.
在这一行上 data: sb }] 并且开发控制台中的红色 X 就在 ]
<?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}
最佳答案
插件似乎有问题。尝试使用以下方法:
plugins: [{
beforeDraw: function(chart) {
var labels = chart.data.labels;
labels.forEach(function(e, i) {
var meta = chart.data.datasets[0]._meta;
var bar = meta[Object.keys(meta)[0]].data[i]._model;
var dataPoint = e.split(/\s/)[1];
if (dataPoint === '12') bar.backgroundColor = 'blue';
else if (dataPoint === '13') bar.backgroundColor = 'green';
});
}
}]
关于javascript - Chart.JS 图表未生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45491119/