[英]How do you insert a linear horizontal line in chart.js
https://jsfiddle.net/jy8b7w0m/2/
我制作了一張圖表來監測 BMI 的進展。 我想添加一條像 y=25 這樣的水平線。 這將表明該人所需的 BMI。 在 jdfiddle 中,我制作了一個數據集,其中包含相同的數據,這些數據具有我正在尋找的相同效果:y=Actor.DesiredBmi。 我該怎么做呢?
var canvas = document.getElementById('bmi-chart');
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(51, 204, 51)',
blue: 'rgb(54, 162, 235)'
};
var myLineChart = new Chart(canvas, {
type: 'line',
data: {
labels: ['2020-05-20', '2020-05-21', '2020-05-23', '2020-05-24', '2020-05-25', '2020-06-02', '2020-06-03', '2020-06-04', '2020-06-05', '2020-06-06', '2020-06-07'],
datasets: [{
order: 1,
label: 'Current BMI',
fill: false,
borderColor: window.chartColors.blue,
data: [36.0, 24.0, 29.0, 26.0, 23.0, 26.0, 26.0, 26.0, 26.0, 26.0, 26.0]
}, {
order: 2,
label: 'Desired BMI',
type: 'line',
borderColor: window.chartColors.red,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24]
}
]
},
options: {
responsive: true,
backgroundRules: [{
backgroundColor: window.chartColors.blue,
yAxisSegement: 18.5
},
{
backgroundColor: window.chartColors.green,
yAxisSegement: 24.9
},
{
backgroundColor: window.chartColors.yellow,
yAxisSegement: 29.9
},
{
backgroundColor: window.chartColors.orange,
yAxisSegement: 34.9
}, {
backgroundColor: window.chartColors.red,
yAxisSegement: Infinity
}
],
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
stepSize: 1
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats: {
week: 'YYYY MMM D h:mm:ss'
}
}
}]
}
},
plugins: [{
beforeDraw: function(chart) {
var ctx = chart.chart.ctx;
var ruleIndex = 0;
var rules = chart.chart.options.backgroundRules;
var yaxis = chart.chart.scales["y-axis-0"];
var xaxis = chart.chart.scales["x-axis-0"];
var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1);
for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) {
if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) {
ctx.fillStyle = rules[ruleIndex].backgroundColor;
ctx.fillRect(xaxis.left, yaxis.top + ((i - 1) * (yaxis.height * partPercentage)), xaxis.width, yaxis.height * partPercentage);
} else {
ruleIndex++;
i++;
}
}
}
}]
});
<canvas id="bmi-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>```
您應該更新數據源並更新圖表。
addline(25);
function addline(num){
var item={
order: myLineChart.data.datasets.length-1,
label: 'Title',
type: 'line',
borderColor: window.chartColors.black,
data:new Array(myLineChart.data.datasets[0].data.length).fill(num)
}
myLineChart.data.datasets.push(item)
myLineChart.update();
};
var canvas = document.getElementById('bmi-chart'); window.chartColors = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(51, 204, 51)', blue: 'rgb(54, 162, 235)' }; var myLineChart = new Chart(canvas, { type: 'line', data: { labels: ['2020-05-20', '2020-05-21', '2020-05-23', '2020-05-24', '2020-05-25', '2020-06-02', '2020-06-03', '2020-06-04', '2020-06-05', '2020-06-06', '2020-06-07'], datasets: [{ order: 1, label: 'Current BMI', fill: false, borderColor: window.chartColors.blue, data: [36.0, 24.0, 29.0, 26.0, 23.0, 26.0, 26.0, 26.0, 26.0, 26.0, 26.0] }, { order: 2, label: 'Desired BMI', type: 'line', borderColor: window.chartColors.red, data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24] } ] }, options: { responsive: true, backgroundRules: [{ backgroundColor: window.chartColors.blue, yAxisSegement: 18.5 }, { backgroundColor: window.chartColors.green, yAxisSegement: 24.9 }, { backgroundColor: window.chartColors.yellow, yAxisSegement: 29.9 }, { backgroundColor: window.chartColors.orange, yAxisSegement: 34.9 }, { backgroundColor: window.chartColors.red, yAxisSegement: Infinity } ], scales: { yAxes: [{ ticks: { beginAtZero: false, stepSize: 1 } }], xAxes: [{ type: 'time', time: { displayFormats: { week: 'YYYY MMM D h:mm:ss' } } }] } }, plugins: [{ beforeDraw: function(chart) { var ctx = chart.chart.ctx; var ruleIndex = 0; var rules = chart.chart.options.backgroundRules; var yaxis = chart.chart.scales["y-axis-0"]; var xaxis = chart.chart.scales["x-axis-0"]; var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1); for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) { if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) { ctx.fillStyle = rules[ruleIndex].backgroundColor; ctx.fillRect(xaxis.left, yaxis.top + ((i - 1) * (yaxis.height * partPercentage)), xaxis.width, yaxis.height * partPercentage); } else { ruleIndex++; i++; } } } }] }); addline(33); function addline(num){ var item={ order: myLineChart.data.datasets.length-1, label: 'Title', type: 'line', borderColor: window.chartColors.green, data:new Array(myLineChart.data.datasets[0].data.length).fill(num) } myLineChart.data.datasets.push(item) myLineChart.update(); }
<canvas id="bmi-chart"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.