Javascript 带有滑动条的Chart.js

尝试在Chart.js中包含滑块。我试图按照张贴的代码操作，但无法使其正常工作。我还想向滑块控制柄添加工具提示。是否有其他方法可以在不丢失每个滑块的文本或数据的情况下完成此操作？以下是代码和结果： 示例代码为：我使用了 jquery-ui.css jquery-1.10.js jquery-ui.js Chary.js

索引
咖啡：
面包：
蛋糕：
茶：
水：
甜甜圈：
意大利面：

我想以更接近这一点的东西结束：

---

有什么问题？您共享的链接（）与您包含的图像完全相同。工具提示也可以。唯一缺少的是滑块控制柄处的工具提示。那是这样吗？

index

<div class="titre">Coffee:</div>
    <div id="red"></div>
    <div class="titre">Bun:</div>
    <div id="green"></div>
    <div class="titre">Cake:</div>
    <div id="blue"></div>
    <div class="titre">Tea:</div>
    <div id="yellow"></div>
    <div class="titre">Water:</div>
    <div id="sienna"></div>
    <div class="titre">Donut:</div>
    <div id="gold"></div>
    <div class="titre">Spaghetti:</div>
    <div id="violet"></div>

 <canvas id="canvas" height="300" width="300"></canvas>