使用背景關系清除清除先前條形圖中的現有資料

我在這里看到了一個 codepen 演示。單擊第一個按鈕，然后單擊第二個按鈕，資料會很好地變化，但是，當您將滑鼠隨機懸停在此處的條形圖上時，值會變為第一個值而不是第二組值. 我該如何解決這個問題？我試過使用 ctx.clear()

function clearrr(){
    ctx.clear();
}

uj5u.com熱心網友回復：

你可以ctx.clearRect(x, y, width, height)改用。所以ctx.clearRect(0, 0, canvas.width, canvas.height)清除了整個畫布。

uj5u.com熱心網友回復：

你需要清理你的畫布。

在您的代碼上，似乎您clearrr()在單擊按鈕 2 后沒有呼叫您的函式。

嘗試這樣的事情： ctx.clearRect(0, 0, canvas.width, canvas.height);

uj5u.com熱心網友回復：

每次單擊其中一個按鈕時，您都會創建一個新的圖表物件。這意味著所有圖表事件處理程式都保持安裝狀態。

您可以通過呼叫 myChart.destroy() 來終止前一個圖表以洗掉圖表事件處理程式。或者，這會更好，只需在單擊其中一個按鈕時更改現有圖表的值：

let data_set_arr = [];
let data_arrayy = [];
let chart = null;

function trig_data() {
  data_arrayy = [100, 50, 60, 80, 70];
  data_set_arr = ["meow", "gs", "dada", "bab", "Dgg"];
}

function trig_data_2() {
  data_arrayy = [10, 10, 60, 20, 90];
  data_set_arr = ["data", "cam", "bell", "bob", "Dog"];
}

function this_button() {
  trig_data()
  bar_charty()
}

function this_button_2() {
  trig_data_2()
  bar_charty()
}

function clearrr() {
  ctx.clear();
}

function bar_charty() {

  var ctx = document.getElementById('myChart').getContext("2d");

  var barStroke = ctx.createLinearGradient(700, 0, 120, 0);
  barStroke.addColorStop(0, 'rgba(0, 255, 188, 0.6)');
  barStroke.addColorStop(1, 'rgba(0, 205, 194, 0.6)');

  var barFill = ctx.createLinearGradient(700, 0, 120, 0);
  barFill.addColorStop(0, "rgba(0, 255, 188, 0.6)");
  barFill.addColorStop(1, "rgba(0, 205, 194, 0.6)");

  var barFillHover = ctx.createLinearGradient(700, 0, 120, 0);
  barFillHover.addColorStop(0, "rgba(0, 255, 188, 0.8)");
  barFillHover.addColorStop(1, "rgba(0, 205, 194, 0.6)");

  // only create a chart if none exists
  if (!chart) {
    chart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: data_set_arr,
        datasets: [{
          label: "Data",
          borderColor: barStroke,
          borderWidth: 1,
          fill: true,
          backgroundColor: barFill,
          hoverBackgroundColor: barFillHover,
          data: data_arrayy
        }]
      },
      options: {
        animation: {
          easing: "easeOutQuart"
        },
        legend: {
          position: "bottom",
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              fontColor: "#fafafa",
              fontStyle: "bold",
              beginAtZero: true,
              padding: 15,
              //display: false - remove this and commenting to display: false
            },
            gridLines: {
              drawTicks: false,
              display: false,
              color: "transparent",
              zeroLineColor: "transparent"
            }
          }],
          xAxes: [{
            gridLines: {
              display: false,
              color: "transparent",
              zeroLineColor: "transparent"
            },
            ticks: {
              padding: 15,
              beginAtZero: true,
              fontColor: "#fafafa",
              fontStyle: "bold",
              maxTicksLimit: 20,
              //display: false - remove this and commenting to display: false
            }
          }]
        }
      }
    });

  } else {
    // do not create a new chart just change the labels and values, and then update
    chart.data.labels = data_set_arr;
    chart.data.datasets[0].data = data_arrayy;
    chart.update();
  }
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0 auto;
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  overflow: hidden;
  background: #fafafa;
}

a {
  text-decoration: none;
  color: #212121;
  transition: 0.3s ease;
}

a:hover {
  color: #00ffbc;
  transition: 0.3s ease;
}

.view-window {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 0;
  padding: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #212121;
  color: #fafafa;
  overflow: hidden;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

canvas {
  background: #212121;
  width: 100% !important;
  max-height: 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!--Base Template-->
<button onclick="this_button()">First</button>
<button onclick="this_button_2()">Second</button>

<section class="view-window">
  <div class="screen">
    <canvas id="myChart"></canvas>
  </div>
</section>

標籤：javascript html css

上一篇：單擊按鈕時鏈接到（react-router-dom）條件渲染

下一篇：在洗掉重復值的同時轉換陣列布局