<script type="text/javascript">
$(window).load(function(){
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var horizonalLinePlugin = {
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
};
}
};
Chart.pluginService.register(horizonalLinePlugin);
var data = {
labels: <?=json_encode($mytime);?>, //กำหนดให้เป็น Json Format ก่อน ["00:00","00:01"]
datasets: [{
label: 'Summary Sirikitdam Water Flow m3/s',
data: <?=json_encode($cms);?>, //กำหนดให้เป็น Json Format ก่อน
scaleOverride: false,
scaleSteps: 0,
scaleStartValue: 0,
scaleStepWidth: 1,
pointRadius: 0,
backgroundColor: [
'rgba(50,205,50,1)'
],
borderColor: [
'rgba(0, 100, 64, 1)'
],
borderWidth: 2
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'FLOW RATE (m3/s)'
},
ticks: {
max: 800,
min: 0,
stepSize: 100
}
}],
/* xAxes: [ {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}] */
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 80,
maxTicksLimit: 49,
stepSize: 10
}
}]
},
"horizontalLine": [{
"y": 800,
"style": "rgba(255, 0, 0, .5)",
"text": " ▼ RELEASE 4 UNIT"
},{
"y": 600,
"style": "rgba(30, 180, 0, .5)",
"text": " ▼ RELEASE 3 UNIT"
}, {
"style": "rgba(238, 130, 238, .5)",
"y": 400,
"text": " ▼ RELEASE 2 UNIT"
}, {
"style": "rgba(0, 0, 0, .4)",
"y": 200,
"text": " ▼ RELEASE 1 UNIT"
}]
}
});
});
</script>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น