代码之家 › 专栏 › 技术社区 › Kiwi

图表js始终可见标签

chart.js charts angularjs javascript

Kiwi · 技术社区 · 10 年前

我正在为客户重新设计一个应用程序,他们想显示一个图表。他们目前使用的是一个基础设施图表,他们很想停止使用,但布局必须保持不变。

这是他们想要的布局(所以标签应该是可见的,单独的条形图…) chart

所以我的第一个选择是尝试Chart。js,但我只能得到这样的结果:

所以基本上,唯一需要做的事情就是始终显示标签。

数据是通过角度提供的,如果是整数,则只是一个数组。对图表使用以下指令: http://jtblin.github.io/angular-chart.js/

我当前的html:

<canvas id="polar" class="chart chart-polar-area" data="data.values" labels="data.labels" width="200" height="200"
        options="{animateRotate: false}"></canvas>

我发现了这个; How to add label in chart.js for pie chart 但我无法让它发挥作用

1 回复 | 直到 9 年前

Community Mohan Dere 9 年前

基于 ChartJS: Change the positions of the tooltips

预览

将上面的图表转换为角度图表很容易,因为我们只是设置选项。然而,我们需要进行2个小的更改(即,设置图表和ctx变量 this

// THIS IS REQUIRED AND WAS ADDED
tooltipEvents: [],
onAnimationComplete: function () {
    // THESE 2 LINES ARE NEW
    var chart = this.chart;
    var ctx = this.chart.ctx;

    this.segments.forEach(function (segment) {
        var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
            // THESE 2 LINES WERE CHANGED
            x: chart.width / 2,
            y: chart.height / 2,
            startAngle: segment.startAngle,
            endAngle: segment.endAngle,
            outerRadius: segment.outerRadius * 2 + 10,
            innerRadius: 0
        })
    ...

假设包含了库脚本,则整个代码如下所示

HTML格式

<div ng-app="myApp">
    <div ng-controller="myController">
        <canvas id="polar-area" class="chart chart-polar-area" data="data" labels="labels" options="options"></canvas>
    </div>
</div>

剧本

angular.module('myApp', ["chart.js"]);
angular.module('myApp').controller('myController', function ($scope) {
        $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
        $scope.data = [300, 500, 100, 40, 120];
        $scope.options = {
            scaleOverride: true,
            scaleStartValue: 0,
            scaleStepWidth: 40,
            scaleSteps: 10,
            tooltipEvents: [],
            onAnimationComplete: function () {
                var chart = this.chart;
                var ctx = this.chart.ctx;

                this.segments.forEach(function (segment) {
                    var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({
                        x: chart.width / 2,
                        y: chart.height / 2,
                        startAngle: segment.startAngle,
                        endAngle: segment.endAngle,
                        outerRadius: segment.outerRadius * 2 + 10,
                        innerRadius: 0
                    })

                    var normalizedAngle = (segment.startAngle + segment.endAngle) / 2;
                    while (normalizedAngle > 2 * Math.PI) {
                        normalizedAngle -= (2 * Math.PI)
                    }

                    if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5))
                        ctx.textAlign = "start";
                    else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) {
                        outerEdge.y += 5;
                        ctx.textAlign = "center";
                    }
                    else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) {
                        outerEdge.y - 5;
                        ctx.textAlign = "center";
                    }
                    else
                        ctx.textAlign = "end";

                    ctx.fillText(segment.label, outerEdge.x, outerEdge.y);
                })
            }
        }
    }
);

小提琴手- http://jsfiddle.net/tmzpy7Lt/