小编Den*_*ngo的帖子

如何在Chart.js画布插件中添加标签?

我正在使用令人敬畏的插件Chart.js,我正试图在每个百分比内找到显示标签的方式.所以我用Google搜索了,我发现了这个问题:https://github.com/nnnick/Chart.js/pull/35

我做了一个简单的小提琴测试它,但不起作用:http://jsfiddle.net/marianico2/7ktug/1/

这是内容:

HTML

<canvas id="canvas" height="450" width="450"></canvas>
Run Code Online (Sandbox Code Playgroud)

JS

$(document).ready(function () {
    var pieData = [{
        value: 30,
        color: "#F38630",
        label: 'HELLO',
        labelColor: 'black',
        labelFontSize: '16'
    }, {
        value: 50,
        color: "#E0E4CC"
    }, {
        value: 100,
        color: "#69D2E7"
    }];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, {
        labelAlign: 'center'
    });
});
Run Code Online (Sandbox Code Playgroud)

我担心文档中没有关于此的信息.

此外,我想知道如何为每个部分显示标签,但在图表之外.由一条线连接.和highcharts.js的图表一样.

顺便说一句,如果你推荐我一个html5图表替代品,包括我上面提到的选项,我会很高兴.我听说过flot插件,但我担心不支持动画......

如果您需要更多信息,请告诉我,我会编辑帖子.

jquery charts canvas css3 chart.js

41
推荐指数
2
解决办法
8万
查看次数

如何向chart.js图添加工具提示

我正在开发一个webapp,最近我用谷歌图表和chart.js交换了谷歌图表,因为它在视觉上更具吸引力.然而,我所承受的一个损失是我不能再在数据点之上获得工具提示.我想知道是否有人知道如何做到这一点,因为我是一个新手javascript.以下是图表和设置的代码:

    var data = {
            labels : graphData[0],
            datasets : [
                {
                    fillColor : "rgba(200,160,100,0.5)",
                    strokeColor : "rgba(80,240,70,1)",
                    pointColor : "rgba(80,240,70,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[3]
                },
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[1]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : graphData[2]
                }
            ]
        };

        var options = {
            scaleShowGridLines : true,
            scaleShowLabels : true,
            animationSteps : 150,
            scaleOverride: true,
            scaleSteps …
Run Code Online (Sandbox Code Playgroud)

javascript charts chart.js

19
推荐指数
3
解决办法
2万
查看次数

标签 统计

chart.js ×2

charts ×2

canvas ×1

css3 ×1

javascript ×1

jquery ×1