#javascript #php #html #button #chart.js
#javascript #php #HTML #кнопка #chart.js
Вопрос:
Я создаю диаграмму для оценки зонда. Пока все работает. Только я хотел бы изменить цвет отдельных точек данных во время выполнения. Но я пробую это уже давно, прочитал различные сообщения на форуме и потерпел неудачу.
Я попробовал это так. Приходит сообщение, точка прыгает, но цвет остается черным.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Anzeige</title>
<script src="dist/Chart.min.js"></script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FFFFFF" alink="#FFFF00" vlink="#FFFF00">
<style media="all" type="text/css">@import "CSS/anzeige.css";</style>
<div id='zeile_1'>
<div style="float: left; height:200px; width:5%; padding-left:1%" ><font size=2>MP</font><font size=5><br>1</font><br><br><font size=2>St.</font><font size=5><br>1</font></div>
<div style="float: left; height:350px; width:94%">
<canvas id='MP1'></canvas><button id='randomizeDataMP1'>Randomize Data</button> <script>
var Chart1ctx = document.getElementById('MP1').getContext('2d');
var Chart1 = new Chart(Chart1ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
//labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
labels: ['Pos 1' ,'Pos 2' ,'Pos 3' ,'Pos 4' ,'Pos 5' ,'Pos 6' ,'Pos 7' ,'Pos 8' ,'Pos 9' ,'Pos 10' ,'Pos 11' ,'Pos 12' ,'Pos 13' ,'Pos 14' ,'Pos 15' ,'Pos 16' ,],
datasets: [{
label: 'Tol Oben',
borderColor: 'rgb(255, 0, 0)',
fill: false,
pointRadius:0,
data: [1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,1.935 ,]
},
{
label: 'Tol Unten',
borderColor: 'rgb(255, 0, 0)',
fill: false,
pointRadius:0,
data: [1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,1.905 ,]
},
{
label: 'Tol Sollwert',
borderColor: 'rgb(0, 255, 0)',
fill: false,
pointRadius:0,
data: [1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,1.920 ,]
},
{
label: 'Tol Oben',
pointBackgroundColor: 'rgba(0, 0, 0,1)',
pointRadius:3,
showLine: false,
data: [1.901 ,1.934 ,1.936 ,1.918 ,1.925 ,1.912 ,1.909 ,1.903 ,1.92 ,1.914 ,1.914 ,1.923 ,1.921 ,1.938 ,1.906 ,1.926 ,]
},
{
label: 'Bar Dataset',
data: [
1.938, 1.938, 1.938, , , , , 1.938, , , , , , 1.938, 1.938, , ],
backgroundColor: [
'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 0, 0.5)', , , , , 'rgba(255, 0, 0, 0.5)', , , , , , 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', , ],
type: 'bar'
}
]
},
// Configuration options go here
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 0.005
}
}]
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false }
}
});
document.getElementById('randomizeDataMP1').addEventListener('click', function() {
alert('Button Click');
Chart1.data.datasets[3].data[2] = 1.94;
Chart1.config.data.datasets[3]['pointBackgroundColor'][2] = 'rgba(255, 0, 0,0.5)';
window.Chart1.update();
});
</script>
</div>
</div>
</body>
</html>
Можете ли вы мне помочь? Небольшой пример сценария, безусловно, очень поможет мне распознать мою ошибку мышления?
SPages
PS.: Извините, английский не мой родной язык, но я стараюсь изо всех сил.
Ответ №1:
используйте массив для цветов
Chart1.config.data.datasets[3]['pointBackgroundColor'] = Array.from(Array(16)).map((e, i) => i === 2 ? 'rgba(255, 0, 0,0.5)' : 'rgba(0, 0, 0, 1)' );
Комментарии:
1. Иногда решение кажется таким простым, когда вы его знаете. Большое вам спасибо 🙂 1