使用HTML中的数据显示ChartJS圆环图

Question

我有一种显示产品的方法，当这些产品被过滤时，它显示X（与过滤器匹配的数量）OF X（该类别中的总数）

我想要一个相应的圆环图我们ChartJS，我需要它使用我目前在html中设置的数据点作为......

<h4>
<strong>17</strong>
of 17            
</h4>

我在考虑将这两个数字包装在一个div中并给它一个数据集，但我不确定如何将它与ChartJS对应。

您可以在过滤器侧边栏上方看到我当前的进度 - http://bootsandlaces.net/products/footballs/

任何人都可以帮助我吗？

Answer 1

好吧，如果你必须从DOM中提取数据，这是可能的解决方案（不是最漂亮的解决方案，但它有效......）。提供相应的HTML元素ID，例如金额和总金额。

var total = document.getElementById("total").innerText;
var amount = document.getElementById("amount").innerText / total * 100;
var left = 100 - amount;

if ( amount && total ) {
 data.datasets[0].data = [amount, left];
}

See this working fiddle

做一些造型......