chartist.js - Chartist 插件工具提示：在工具提示中添加标签

Question

假设我的饼图有这种数据，我将使用GlobeGitter 的 Chartist 插件工具提示

        var data = {
            labels: ['ra','rb','rc','rd','re','rf'],
            series: [5, 3, 4, 1, 6, 4]
        };

如何在我的工具提示中添加标签的值？工具提示的示例文本

拉：5

Answer 1

将脚本和 css 添加到您的脑海中

<link rel="stylesheet" type="text/css" href="/css/chartist-plugin-tooltip.css" />
<script type="text/javascript" src="/js/chartist-plugin-pointlabels.js" /></script>

然后将插件添加到您的选项中，如下所示：

new Chartist.Bar('#ct_chart', {
   labels: ['ra','rb','rc','rd','re','rf'],
   series: [5, 3, 4, 1, 6, 4]

   }, { 
   plugins: [
     Chartist.plugins.tooltip()
   ]

});

Answer 2

var data = {
    labels: ['ra', 'rb', 'rc', 'rd', 're', 'rf'],
    series: [[
        { meta: 'ra', value: 5 },
        { meta: 'rb', value: 3 },
        { meta: 'rc', value: 4 },
        { meta: 'rd', value: 1 },
        { meta: 're', value: 6 },
        { meta: 'rf', value: 4 },
    ]], { 
        plugins: [
            Chartist.plugins.tooltip()
        ]
    }
};

Answer 3

Think that 'GlobeGitter's Chartist Plugin Tooltip' is not compatible with pie charts, but you can use 'tooltipster' here is an example Visit jsbin.com/xojezu/edit?html,js,output