使用Chart.js设置条形和线条样式 [英] Styling Bars and Lines with Chart.js

问题描述

我们已经使用Chart.js已有几个月了，并且喜欢它的强大功能使我们易于编程.我们希望开始添加到由Chart.js生成的图表中的一件事是对生成的图表进行更好的样式化.我们正在使用的大多数图表都是条形图，其中还包含一些折线图.

We have been using Chart.js for several months now and like the power it gives us with ease of programming. One of the things we would like to start adding to the charts produced from Chart.js is a little nicer styling of the charts we generate. Most of the charts we are using are bar charts, with a few line charts thrown in.

当我使用样式"一词时，我真正要说的是使条形或线条看起来更好看.具体来说，我想在条形图和折线图后面添加阴影，甚至在条形图上添加斜角.

When I use the term "styling" what I am really talking about is making the bars or lines look a little nicer. Specifically I would like to add a drop shadow behind the bar and line charts, and maybe even a bevel to the bars.

我已经浏览了许多问题，但似乎找不到我想要的东西.我还通过修改Chart.js文件为javascript添加了阴影和模糊效果做了一些实验，但是我没有将其添加到正确的位置.我将这些更改放入Chart.Element.extend绘制函数中:

I've looked through many questions, and can't seem to find what I am looking for. I've also done some experimenting myself by modifying the Chart.js file to add a drop shadow and blur to the javascript, but I'm not getting it added in the correct place. I put these changes inside of the Chart.Element.extend draw function:

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

我把它放在ctx.fill()之前，它几乎可以完成我想要的操作.结果是我在绘制的条形图和折线图上都得到了一个看起来不错的阴影，但是在x轴和y轴的标签上也得到了阴影，效果并不理想.我只想在条形和线条上放置阴影，而不是在标签上放置阴影.

I put it right before the ctx.fill() and it almost does what I want. The result is I get a drop shadow that looks pretty good on both the bar and line charts I am drawing, but I also get a drop shadow on the labels for the x and y axes, which does not look good. I'd like to have the drop shadow on just the bars and the lines, not on the labels.

我们将竭诚为您提供任何帮助.我对javascript没有经验，但是能够完成很多编码，否则，如果没有Stack Overflow上所有人的帮助，我将无法做到.

Any help you can provide would be greatly appreciated. I am not experienced with javascript, but have been able to pull off quite a bit of coding I wouldn't otherwise be able to do without the help of everyone on Stack Overflow.

推荐答案

为折线图添加阴影

您可以扩展折线图类型来做到这一点

Adding a Drop Shadow for Line Charts

You can extend the line chart type to do this

预览

脚本

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/

这篇关于使用Chart.js设置条形和线条样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！