在vue chart.js中为线添加阴影 [英] add shadow for line in vue chartjs

问题描述

我想在图表中为该线添加阴影.

I want to add shadow for the line in my chart.

我的代码就是这样

   import { Line } from 'vue-chartjs'
    import Chart  from 'chart.js'

    let draw = Chart.controllers.line = Chart.controllers.line.extend({
    draw: function() {
            let ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.shadowColor = 'red';
        ctx.shadowBlur = 12;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 5;
        ctx.stroke();
        draw.apply(this, arguments);
        ctx.restore();
    }
});

    const BasicLineChart = {
      extends: Line,
      props: ['data', 'options'],
      mounted () {
        const options = this.options || {
            responsive: true, 
            maintainAspectRatio: false,
            borderWidth: 1,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    position: 'right',
                    scaleLabel: {
                        display: false,
                        labelString: 'Pris',
                        fontFamily: 'apercu-light',
                    },
                    gridLines: {
                        display:true,
                        color: 'rgba(255, 255, 255, 0.6)'
                    },
                    ticks: {
                        beginAtZero:false,
                        mirror: true
                    }
                }],
                xAxes: [{
                    ticks: {
                        display: true,
                    },
                    scaleLabel: {
                        display: false,
                    },
                    gridLines: {
                        display:true,
                        color: 'rgba(255, 255, 255, 0.6)'
                    }
                }]
            }
        }

        this.renderChart(this.data, options)
    }
}

    export default {
        props: ['id'],
        components: {
            BasicLineChart,
        },
        created() {
            this.draw()
        },
        data() {
            return {
                chartData: {},
                showChart: false
            }
        },
        methods: {
            draw() {
                axios.get('url/' + this.id).then(({ data })=> {
                    this.showChart = true;
                })
            } 
        }
    };

使用该代码，我能够为行添加阴影.但是，网格也增加了蓝色阴影，这不是理想的行为.网格不应有任何阴影.

With that code I was able to add the shadow for line. However the grids for added blue shadow as well, which is not desired behavior. The grids should not have any shadow.

网格和线上阴影的屏幕截图.注意到沿着网格线略带蓝色的阴影了吗?我想摆脱它

The screen shot of the shadow on grids and line. Notice the slighly blue shade along the grids line? I want to get rid of it

如何摆脱网格上的阴影?

What could be done to get rid of the shadow on the grids ?

已更新:

我按照建议更新了代码.我遇到了这个错误

I updated the code as suggested. I got this error

app.js?v=79:76561 Uncaught TypeError: this.chart.getDatasetMeta is not a function
    at ChartElement.getMeta (app.js?v=79:76561)
    at ChartElement.linkScales (app.js?v=79:76545)
    at ChartElement.initialize (app.js?v=79:76535)
    at ChartElement.Chart.DatasetController (app.js?v=79:76514)
    at ChartElement [as constructor] (app.js?v=79:5711)
    at ChartElement [as constructor] (app.js?v=79:5711)
    at ChartElement.draw (app.js?v=79:71285)
    at Chart.drawDataset (app.js?v=79:76122)
    at Chart.drawDatasets (app.js?v=79:76097)
    at Chart.draw (app.js?v=79:76061)

推荐答案

尝试将Chart.controllers.line.extend更改为此:

Chart.controllers.line = Chart.controllers.line.extend({
    draw: function() {
        let ctx = this.chart.chart.ctx;
        ctx.save();
        ctx.shadowColor = 'red';
        ctx.shadowBlur = 12;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 5;
        ctx.stroke();
        draw.apply(this, arguments);
        ctx.restore();
    }
});

为避免stroke()方法在网格线绘制中也保持重新定义.

to avoid stroke() method stay redefined also for gridlines drawing.

检查此示例(非vue.js): https://jsfiddle.net/beaver71/aorgfd0z/

Check this example (non vue.js): https://jsfiddle.net/beaver71/aorgfd0z/

这篇关于在vue chart.js中为线添加阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！