使用Chart.js设计条形图和线条

我们几个月来一直在使用Chart.js,就像它给我们提供了易于编程的能力.我们想要开始添加到Chart.js生成的图表中的一件事是我们生成的图表的一个更好的样式.我们使用的大多数图表都是条形图,其中插入了一些折线图.

当我使用术语"造型"时,我真正在谈论的是使条形或线条看起来更好一些.具体来说,我想在条形图和折线图后面添加一个投影,甚至可能是对条形图的斜角.

我看了很多问题,似乎无法找到我想要的东西.我也通过修改Chart.js文件为javascript添加投影和模糊来做自己的一些实验,但我没有把它添加到正确的位置.我将这些更改放在Chart.Element.extend绘制函数中:

ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

我把它放在ctx.fill()之前,它几乎完成了我想要的.结果是我得到的阴影在我绘制的条形图和折线图上都看起来相当不错,但我在x和y轴的标签上也有一个阴影,看起来不太好.我想在条形和线条上留下阴影,而不是在标签上.

我们将非常感谢您提供的任何帮助.我对javascript没有经验,但是如果没有Stack Overflow上的每个人的帮助,我都能够完成相当多的编码.

为折线图添加投影

您可以扩展折线图类型以执行此操作

预习

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalStroke = ctx.stroke;
        ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = '#000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            originalStroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

然后

...
var myChart = new Chart(ctx).LineAlt(data, {
    datasetFill: false
});

小提琴 - https://jsfiddle.net/7kbz1L4t/

???????

?????? ？^{覆盖绘图功能}

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowColor = '#07C';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowColor = '#07C';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function() {
    draw.apply(this, arguments);
    let ctx = this.chart.chart.ctx;
    let _stroke = ctx.stroke;
    ctx.stroke = function() {
        ctx.save();
        ctx.shadowColor = '#07C';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 4;
        _stroke.apply(this, arguments);
        ctx.restore();
    }
};

let ctx = document.querySelector("#canvas").getContext('2d');
let myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            data: [65, 59, 75, 64, 70, 30, 40],
            borderColor: '#07C',
            pointBackgroundColor: "#FFF",
            pointBorderColor: "#07C",
            pointHoverBackgroundColor: "#07C",
            pointHoverBorderColor: "#FFF",
            pointRadius: 4,
            pointHoverRadius: 4,
            fill: false,
            tension: 0.15
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            displayColors: false,
            callbacks: {
                label: function(e, d) {
                    return `${e.xLabel} : ${e.yLabel}`
                },
                title: function() {
                    return;
                }
            }
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    max: 90
                }
            }]
        }
    }
});