gpt4 book ai didi

javascript - 无法使用 Chart.js 制作图表

转载 作者:行者123 更新时间:2023-12-03 08:16:49 24 4
gpt4 key购买 nike

我将向我的网站添加一个图表,但如果我这样做,我将不会得到任何结果。我使用 ChartJS 作为外部库。

这是我的代码:

var randomScalingFactor = function(){ 
return Math.round(Math.random()*100)
};

var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}

window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/src/Chart.Bar.js" type="application/javascript"></script>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>

和一个JS Fiddle

我做错了什么?

最佳答案

这是一个有效的 JS Fiddle:https://jsfiddle.net/qb2opyd8/3/

我做了什么:

  • 二手https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
  • 将 JS Fiddle 配置更改为 No wrap - in <body>

关于javascript - 无法使用 Chart.js 制作图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33900099/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com