如何删除chartjs中的一些点

iq0todco 于 2023-10-18 发布在 Chart.js

关注(0)|答案(3)|浏览(157)

我必须隐藏/删除所有数据点，除了倒数第二个点，如在此image中所示，我已经搜索了所有地方，但无法找到适当的解决方案来实现这一点。

myChart.datasets[0].points[0].display = false;
legStretchtCtx.update();

上面的代码片段是针对Chart.js Version 1.0的，但我使用的是Chart.js Version：2.7.1 .我已经使用了这个片段，但它给出了一个错误：
无法读取未定义的属性“0”

var legStretchtCtx = document.getElementById("leg-stretch-chart");
          // var legStretch =
          var myChart = new Chart(legStretchtCtx, {
              type: 'line',
              data: {
                  labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6","Day 7"],
                  datasets: [{
                      label: 'Leg Stretch',
                      data: [3, 4, 5, 4, 3, 3.5, 3.5],
              				backgroundColor:"#70d6db",
                      borderColor: ["#70d6db"],
                      borderWidth: 4,
                      pointBackgroundColor: "#fff",
                      pointRadius: 8,
                      pointHoverRadius: 8,
      				        pointHoverBackgroundColor: "#0ba8b0",
                      pointHoverBorderColor: "#26c1c9",
      				        pointBorderColor:"#26c1c9"

                  }]
              },
              options: {
                  legend: {
                      display: false,
                      labels: {
                          display: true
                      }
                  },
      			responsive:true,
                  scales: {
                      xAxes: [{
                          gridLines: {
                              display: false,
                              drawBorder:false,

                          },
                          ticks: {
                              display: false,
                              fontFamily: "Montserrat",
                              fontColor: "#2c405a",
      						fontSize: 12
                          }
                      }],
                      yAxes: [{
                          gridLines: {
                              display: false,
                              drawBorder:false,

                          },
                          ticks: {
      						display: false,
      						fontFamily: "Montserrat",
                              fontColor: "#2c405a",
                             	fontSize: 12,
      						stepSize:1,
                              min: 0,
                              max: 10,
      					}

                      }]
                  }
              }
          });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
  <div class="leg-stretch-chart-inner">
    <canvas id="leg-stretch-chart" width="100%" height=""></canvas>
  </div>
</div>

chart.js

来源：https://stackoverflow.com/questions/47205760/how-to-remove-some-points-in-chartjs

3条答案

按热度按时间

62o28rlo1#

首先，将pointRadius改为array：

pointRadius: [8, 8, 8, 8, 8, 8, 8]

然后，你必须用每个点的特定值重写这个数组（在我们的例子中，倒数第二个蓬特）并更新：

$("#btnRemovePoints").click(function()
{
    //change the radius of every point except one
    myChart.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
    myChart.update();
});

更多细节在此小提琴：https://jsfiddle.net/s7m1961t/

赞(0）回复(0）举报 2023-10-18

sg2wtvxw2#

$( document ).ready(function() {
      //My Chart 1
      myChart1.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
        myChart1.update();
      //My Chart 2
      myChart2.data.datasets[0].pointRadius = [0, 0, 0, 0, 0, 8, 0];
        myChart2.update();         
    });

赞(0）回复(0）举报 2023-10-18

dgenwo3n3#

适用于版本4.2.1如果按下复选框，则代码将事件显示为点，否则，图形没有点。
标签-日期。数据集-空缺数量

const v = checkbox.value // getting the value from the checkbox
// where there are no events, we put 0, and where there are 10. 
// that is, we make either visible or invisible points
const points = labels.map(date => (date.events ? 10 : 0)) 
// if the checkbox is pressed, then we show points, otherwise we do not show any points
chart.data.datasets[0].pointRadius = v ? points : [] 
chart.update()

赞(0）回复(0）举报 2023-10-18

我来回答

如何删除chartjs中的一些点

3条答案

相关问题

热门标签

最新问答