Javascript 使用chart.js显示图表
我对JavaScript和HTML5非常陌生。我正在尝试使用chart.js将普通折线图打印到画布上。我遵循了他们网站上的分步指南，但无法显示图表 这是当前代码：Javascript 使用chart.js显示图表,javascript,html,canvas,charts,chart.js,Javascript,Html,Canvas,Charts,Chart.js,我对JavaScript和HTML5非常陌生。我正在尝试使用chart.js将普通折线图打印到画布上。我遵循了他们网站上的分步指南，但无法显示图表 这是当前代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CHARTS</title> <script src="../../../Downloads/Chart.js-m
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CHARTS</title>
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
</head>
<body>
<canvas id="myCanvas" width="800" height="500" style="border:dashed #FF0000">Aw Snap!</canvas>
<script>
context = document.getElementById('myCanvas').getContext('2d');
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
Line.defaults = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
}
new Chart(context).Line(data,options);
</script>
</body>
图表
哇，啪！
context=document.getElementById（'myCanvas'）.getContext（'2d'）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：[65,59,90,81,56,55,40]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：[28,48,40,19,96,27100]
}
]
}
Line.defaults={
//布尔值-如果我们在图表数据上方显示比例
scaleOverlay:false，
//布尔值-如果我们想用硬编码的比例覆盖
scaleOverride:错误，
//**如果scaleOverride为真，则需要此选项**
//数字-硬编码刻度中的步数
scaleSteps:null，
//数字-硬编码刻度中的值跳转
ScaleStrepWidth:null，
//数字-刻度起始值
scaleStartValue:null，
//字符串-刻度线的颜色
刻度颜色：“rgba（0,0,0,1）”，
//数字-缩放线的像素宽度
标度宽度：1，
//布尔值-是否在比例上显示标签
scaleShowLabels：对，
//插入JS字符串-可以访问值
scaleLabel:“”，
//字符串-缩放标签的缩放标签字体声明
scaleFontFamily:“Arial”，
//数字-缩放标签字体大小（以像素为单位）
scaleFontSize:12，
//字符串-缩放标签字体重量样式
scaleFontStyle:“正常”，
//字符串-缩放标签字体颜色
scaleFontColor:#666“，
///布尔值-是否在图表中显示网格线
scaleShowGridLines：对，
//字符串-网格线的颜色
scaleGridLineColor:“rgba（0,0,0,05）”，
//Number—网格线的宽度
scaleGridLineWidth:1，
//布尔-点之间的直线是否弯曲
贝塞尔曲线：对，
//布尔值-是否为每个点显示点
是的，
//Number-每个点的半径（以像素为单位）
点半径：3，
//数字-点-点笔划的像素宽度
pointDotStrokeWidth:1，
//布尔值-是否显示数据集的笔划
datasetStroke：对，
//数字-数据集笔划的像素宽度
datasetStrokeWidth:2，
//布尔值-是否用颜色填充数据集
datasetFill:true，
//布尔值-是否为图表设置动画
动画：没错，
//Number-动画步骤数
动画步骤：60，
//字符串动画效果
动画化：“easeOutQuart”，
//函数-动画完成时激发
onAnimationComplete:null
}
新图表（上下文）.Line（数据、选项）；
我做错了什么导致图表无法显示？调用“新图表”时，数据变量尚未初始化。将“新图表”移动到JS块的末尾 使用JS控制台检查错误的提示
编辑：这是另外两个JavaScript错误-options变量未初始化，Line是未定义的变量。请查看我下面的回复，查看演示链接。调用“新图表”时，数据变量尚未初始化。将“新图表”移动到JS块的末尾 使用JS控制台检查错误的提示
编辑：这是另外两个JavaScript错误-options变量未初始化，Line是未定义的变量。请查看我下面的回复，查看演示链接。调用“新图表”时，数据变量尚未初始化。将“新图表”移动到JS块的末尾 使用JS控制台检查错误的提示
编辑：这是另外两个JavaScript错误-options变量未初始化，Line是未定义的变量。请查看我下面的回复，查看演示链接。调用“新图表”时，数据变量尚未初始化。将“新图表”移动到JS块的末尾 使用JS控制台检查错误的提示
编辑：这是另外两个JavaScript错误-options变量未初始化，Line是未定义的变量。请查看我下面的回复，查看演示链接。我想我有一个解决“选项”问题的方法。 如果从中删除选项：
new Chart(context).Line(data,options);
new Chart(context).Line(data);
Line.defaults = { ... }
Line.defaults = { scaleOverlay : true, scaleOverride : true }
<script src="../../../Downloads/Chart.js-master/Chart.js"></script>
我希望这有帮助 我想我有办法解决“选项”问题。 如果从中删除选项：
new Chart(context).Line(data,options);
new Chart(context).Line(data);
Line.defaults = { ... }
Line.defaults = { scaleOverlay : true, scaleOverride : true }