Question

假设我的饼图有这种数据，我将使用GlobeGitter's Chartist Plugin Tooltip

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

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

ra：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

认为'GlobeGitter的Chartist插件工具提示'与饼图不兼容，但你可以使用'tooltipster'这里是一个例子访问jsbin.com/xojezu/edit?html,js,output

Chartist插件工具提示：在工具提示中添加标签

3 个答案: