Question

我有一个chart.js圆环图，其中心我必须显示一个值。有一个日期字段刷新图表，从而影响中心值。

  <div class="col-md-10">
    <form role="form" method="POST">
      <div class="radio">
      <?php
        foreach(returnFromTable($GLOBALS['table_key_area']) as $keyarea)
        {
          echo '<label><input type="radio" name="optradio" id="'.$keyarea['id'].'">'.$keyarea['description'].'&nbsp</label>';
        }
      ?>
      </div>

      <div>
      <?php
        if (isset($_POST['points'])) 
        {
          $x = $_POST['points'];
        }
        else
          echo 'none';
      ?>
      </div>
    </form>
  </div>

问题是，在后续更新图表时，中心区域不会被清除。这个值写在旧的上面。

为此，我在上面的代码中添加了行var text = dataTxt, textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(" ", textX, textY);//attempting to write blank value. ctx.fillText(text, textX, textY); //this writes the value. ctx.save();，但没有效果。关于如何在文字写入之前清理区域的任何想法？

有一个HTML / CSS解决方案可以在中心写入数据，但我不能使用它，因为当图表下载为PNG时它不会导出中央数据。

Answer 1

在典型的使用案例中，人们不会尝试撤消＆＃34;他们在画布上的变化 - 它更容易清除画布并重新开始画画。

ctx.clearRect(0, 0, canvas.width, canvas.height);
// Do my drawing again
myChart.update(); // With chart.js this triggers a redraw.

在您的情况下，我认为您错误地认为Canvas会保存文本图像，并允许您在后续图形中更改它。可以想象它就像Microsoft Paint一样 - 一旦文本出现在图像上，你就无法在没有撤消的情况下轻松摆脱它。

使用fillText在画布上写空白

1 个答案: