我正在尝试在250 mark处的chart.js条形图中添加一条水平线。我已经尝试过chart.js版本2.6.0和版本2.7.0但没有成功。我不确定这是否是由于我使用来自cfquery的数据。我将代码添加到coldfusion页面的底部。我在下面添加了我的代码。
<html>
<head>
<cfparam name="url.urlparam" default="1">
<cfif url.urlparam GTE 5>
<cfset url.urlparam = 1>
<cfelse>
<cfset url.urlparam = url.urlparam + 1>
</cfif>
<script src="../../js/Chart.min.js"></script>
<title>Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://wat524.wat.michelin.com/ca3//RestrictedSection /reportstylesheet.css">
<script src="../../js/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css" href="../.. /css/bootstrap.min.css">
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/chartjs-plugin-annotation.min.js"></script>
<script src="../../js/Chart-bundle.js"></script>
<style type="text/css">
.style1 {color: #000066}
.style3 {
color: #009933;
font-size: 9pt;
}
.style18 {color: #3300FF}
.style19 {
color: #FF0000;
font-weight: bold;
font-size: xx-small;
}
.style21 {color: #000000; font-weight: bold; font-size: xx-small; }
.style22 {
font-size: xx-small;
color: #339933;
font-weight: bold;
}
.style25 {color: #FF0000}
.style26 {color: #339933}
</style>
</head>
<body>
<cfset ColourChange="0">
<cfswitch expression="#url.urlparam#">
<cfcase value="1">
<cfset ColourChange="##FFFF9D">
</cfcase>
<cfcase value="2">
<cfset ColourChange="##9CF5F5">
</cfcase>
<cfcase value="3">
<cfset ColourChange="##F2CCE6">
</cfcase>
cfcase value="4">
<cfset ColourChange="##BFFFDF">
</cfcase>
<cfcase value="5">
<cfset ColourChange="##FFD1A4">
</cfcase>
`enter code here`</cfswitch>
<div class="container align-items-center">
<cfoutput>
<h1 class="display-4"><strong>Total as of #datetimeformat(timestamp, "dd mmmm yyyy HH:nn")#</strong></h1>
</cfoutput>
</div>
<div class="container align-items-center" style="align:center; width: 1600px; height:400px; inline-block;">
<canvas name="charttotal" id="charttotal" width="1200" height="600" ></canvas></div>
</body>
</html>
<script>
var ctx = document.getElementById("charttotal").getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
<cfoutput>
<cfset step = 0>
<cfloop query="rstTotalForChart" >
<cfset step++>"#actual_date#"<cfif step lt 24>,</cfif>
</cfloop>
</cfoutput>
],
datasets: [{
label: 'Total',
data: [
<cfoutput>
<cfset step = 0>
<cfloop query="rstTotalForChart" >
<cfset step++>#prodcount#<cfif step lt 24>,</cfif>
</cfloop>
</cfoutput>
],
backgroundColor:
'rgba(74, 13, 196, 0.74)',
borderColor:
'rgba(81, 0, 244, 1)',
borderWidth: 1
}]
},
options: {
tooltipTemplate: "<%= value%>",
showTooltips: true,
onAnimationComplete: function()
{
this.showTooltips(this.datasets[0].bars, true);
},
tooltipEvents:[],
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 250,
borderColor: 'rgb(244, 13, 13)',
borderWidth: 4,
label: {
backgroundColor: "red",
content: "250",
enabled: true
}
}]
}
});
</script>