Question

我正在使用ChartJS 1.1.1，并且以下代码有问题，该代码旨在自定义Y轴上的刻度/标签，以使它们成为百分比标签。有一个完成此here的示例，但是以下代码实现了draw函数，并且该解决方案在这种情况下不起作用。如何才能做到这一点？这是代码：

<head>   
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>

<div>
    <canvas id="lineChart" width="600" height="400"></canvas>
</div>

<script>
var ctx = document.getElementById("lineChart").getContext("2d");
var data = {
    labels: ["JANUARY", "FEBURARY", "MAR", "APR", "MAY"],
    datasets: [{
        pointColor: "#da3e2f",
        strokeColor: "#da3e2f",
        data: [80, 30, 20, 10, 70]
    }
    ]
};

var options = {
        scales: {
            yAxes: [{
            ticks: {
                   min: 0,
                   max: 100,
                   callback: function(value){return value+ "%"}
                },
                   scaleLabel: {
                   display: true,
                   labelString: "Percentage"
                }
            }]
        }
}


Chart.types.Line.extend({
    name: "lineChart",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, null);

        var ctx = this.chart.ctx;

        var lines = this.options.limitLines;
        var lineLength = 50;
        var xStartPos = 20;
        var xEndPos = 50;
        var xIncrement = 100;

          for (var i = 0; i < lines.length; i++) {
            var xStart = Math.round(this.scale.xScalePaddingLeft);
            var linePositionY = this.scale.calculateY(lines[i].value);

            this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor;
            this.chart.ctx.font = this.scale.font;
            this.chart.ctx.textAlign = "left";
            this.chart.ctx.textBaseline = "top";

            if (this.scale.showLabels && lines[i].label) {
                this.chart.ctx.fillText(lines[i].label, xStart + 5, linePositionY);
            }

            this.chart.ctx.lineWidth = this.scale.gridLineWidth;
            this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor;

            if (this.scale.showHorizontalLines) {
                this.chart.ctx.setLineDash([5, 5]);

                this.chart.ctx.beginPath();
                this.chart.ctx.moveTo(xStartPos+(xIncrement * (i)), linePositionY);
                this.chart.ctx.lineTo(xEndPos+(xIncrement * (i)), linePositionY);
                this.chart.ctx.stroke();
                this.chart.ctx.closePath();

                this.chart.ctx.setLineDash([0, 0]);
            }
        }
    }
});

new Chart(ctx).lineChart(data,  {
   bezierCurve: false,
   datasetFill : false,
   limitLines: [
        {
            value: 60,
            color: 'rgba(255, 0, 0, .8)'
        },
        {
            value: 40,
            color: 'rgba(255, 0,0, 1)'
        },
        {
            value: 70,
            color: 'rgba(255, 0,0, 1)'
        },
        {
            value: 50,
            color: 'rgba(255, 0,0, 1)'
        },
        {
            value: 20,
            color: 'rgba(255, 0,0, 1)'
        }
    ]
});
</script>
</body>

ChartJS-如何在实现绘制功能时自定义Y轴上的刻度/标签

0 个答案: