Chart.js 在运行时更改点的颜色答案

【问题标题】：Chart.js change Color of a Point during runtimeChart.js 在运行时更改点的颜色
【发布时间】：2021-02-04 23:46:23
【问题描述】：

我正在创建一个用于评估探针的图表。到目前为止一切正常。只有我想在运行时更改单个数据点的颜色。但是我试了很久，看了各种论坛帖子，都失败了。

我试过这样。消息来了，点跳了，但颜色还是黑色。

<!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>

你能帮帮我吗？一个小的示例脚本肯定会帮助我认识到我的思维错误？

页面

PS.：对不起，英语不是我的母语，但我会尽力而为。

【问题讨论】：

标签： javascript php html button chart.js

【解决方案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