Question

我想在图表中为该行添加阴影。

我的代码是这样的

   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;
                })
            } 
        }
    };

使用该代码，我可以添加阴影线。然而，网格也增加了蓝色阴影，这是不希望的行为。网格不应该有任何阴影。

网格和线条上的阴影的屏幕截图。请注意网格线上的蓝色阴影？我想摆脱它

可以做些什么来消除网格上的阴影？

更新：

我按照建议更新了代码。我收到了这个错误

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)

Answer 1

尝试将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()方法重新定义网格线绘图。

检查此示例（非vue.js）：https://jsfiddle.net/beaver71/aorgfd0z/

在vue chartjs中添加阴影线

1 个答案: