0

我想为图表中的线条添加阴影。

我的代码是这样的

   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)
4

2 回答 2

3

尝试更改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/

于 2018-03-09T12:33:51.110 回答
0 
      let draw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype, {
        draw: function () {
          let ctx = this.chart.ctx;
          ctx.save();
          ctx.shadowColor = "rgba(54, 54, 54, 0.2)";
          ctx.shadowBlur = 5;
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 4;
          draw.apply(this, arguments);
          ctx.restore();
        },
      });

使用这种方式，阴影不会出现在您的网格线上，如果您正在使用，annotation line那么它也不会给您带来任何问题。我已经在 Vue.js 中实现了这个

于 2021-12-15T10:05:26.097 回答