我正在使用chartist.js库制作图形。我在MYSQL示例中找不到任何一个例子。因此，借助于在线提供的不同库代码，我试图将数值作为数组插入标签中（尽管这是静态的）。但无法生成图形。设法解决这个问题。页面中填充了X轴和Y轴的值，但在浏览器中输入时不会绘制任何直线。
调试器说类型错误：this.data.series[i][m]未定义chartist.min.js:7:17185不赞成使用突变事件。请改用MutationObserver。
代码：
<head>
<script src="../_js/chartist.min.js"></script>
<link href="../_css/chartist.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>Daily performance-- Aspect ratio containers</title>
<?php
$con=mysqli_connect("// due connectn attributes");
if(mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * from Score_result");
$row = mysqli_fetch_array($result, MYSQLI_NUM);
$player1 = array_column($row,"Player1");
$player2 = array_column($row,"Player2");
mysqli_close($con);
?>
</head>
<body>
<div class="ct-chart ct-golden-section"></div>
<script>
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[<?php echo implode(',',$player1); ?>],
[<?php echo implode(',',$player2); ?>]
]
});
</script>
</body>
</html>
我以前使用过ChartJS，但我没有使用json，所以我不确定您的代码可能出了什么问题。
我把它从我写的脚本中提取出来，在脚本中我实现了一个条形图。在这段代码中，变量video_statistics是一个多维数组，包含以下形式的数据：
Month | Premium Users | Total Users
___________________________________
March | 8 | 12
April | 15 | 32
May | 13 | 27
代码：
<?php
$months = array_column($video_statistics,"month");
$premium_users = array_column($video_statistics,"premium_users");
$total_users = array_column($video_statistics,"total_users");
?>
<script type="text/javascript">
$( document ).ready(function() {
var data = {
labels: [<?php echo implode(',',$months);?>],
datasets: [
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [<?php echo implode(',',$total_users); ?>],
title : 'Total Users'
},
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [<?php echo implode(',',$premium_users); ?>],
title : 'Premium Users'
}
]
}
var cht = document.getElementById('videoChart');
var ctx = cht.getContext('2d');
var barChart = new Chart(ctx).Bar(data);
});
</script>
<canvas id="videoChart" width="400" height="400"></canvas>
代码在脚本中运行，但我还没有以这种形式对其进行测试。我希望它能有所帮助。