是否可以在 chart.js 折线图中添加阴影? [英] Is it possible to add a drop shadow to chart.js line chart?

问题描述

我正在使用 chart.js 来构建折线图.我想知道是否可以在我正在显示的折线图中添加阴影.为了澄清，我的意思是给线条本身添加一个阴影.像这样:

这里是代码和代码片段.

//折线图var ctx = document.getElementById("salesData").getContext("2d");var 渐变 = ctx.createLinearGradient(0,0,700,0);gradient.addColorStop(0, 'rgba(255, 204, 128, 1)');gradient.addColorStop(0.5, 'rgba(255, 152, 0, 1)');gradient.addColorStop(1, 'rgba(239, 108, 0, 1)');var 销售数据 = {标签:[1"，2"，3"，4"，5"，6"，7"，8"]，数据集:[{标签:前"，fillColor: "rgba(0, 0, 0, 0)",strokeColor:渐变，点颜色:渐变，pointStrokeColor: "#202b33",pointHighlightStroke: "rgba(225,225,225,0.9)",数据:[0、10、40、48、55、64、55、72]}]};window.myLineChart = new Chart(ctx).Line(salesData, {点点半径:0，pointDotStrokeWidth : 0,数据集StrokeWidth:4，scaleShowVerticalLines:真，scaleGridLineWidth : 2,scaleShowGridLines:真，scaleGridLineColor : "rgba(225, 255, 255, 0.02)",scaleOverride:真，规模步数:12，scaleStepWidth: 10,scaleStartValue: 0,响应式:真});

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></脚本><canvas id="salesData"></canvas>

解决方案

扩展图表并覆盖 draw 函数将是一种(复杂的)方法.

一种更简单的方法是复制图表画布，隐藏所有其他元素(网格线、刻度标签...)，以不同的方式设置线条的样式(更粗且呈灰色阴影).然后将此复制的画布放置在原始画布的下方和右侧.

CSS

.shadowParent {位置:相对；}.shadowParent canvas.firstShadow {位置:绝对；左:10px；顶部:30px；z 指数:-1；}

HTML

<div class="shadowParent"><canvas id="myChartShadow" class="firstShadow" width="600"></canvas><canvas id="myChart" width="600"></canvas></div>

脚本

<代码>...var ctxShadow = document.getElementById("myChartShadow").getContext("2d");var dataShadow = JSON.parse(JSON.stringify(data));dataShadow.datasets[0].strokeColor = "rgba(220,220,220,0.2)"新图表(ctxShadow).Line(dataShadow，{数据集StrokeWidth:10，数据集填充:假，点点:假，显示工具提示:假，});

<小时>

如果你的阴影不够模糊，你可以再添加一层

CSS

.shadowParent canvas.secondShadow {位置:绝对；左:10px；顶部:30px；z 指数:-1；}

HTML

<div class="shadowParent"><canvas id="myChartShadow2" class="secondShadow" width="600"></canvas>...

脚本

var ctxShadow2 = document.getElementById("myChartShadow2").getContext("2d");var dataShadow2 = JSON.parse(JSON.stringify(data));dataShadow2.datasets[0].strokeColor = "rgba(220,220,220,0.1)"新图表(ctxShadow2).Line(dataShadow2，{数据集StrokeWidth:20，数据集填充:假，点点:假，显示工具提示:假，scaleFontColor: "rgba(0,0,0,0)",scaleLineColor: "rgba(0,0,0,0)",scaleShowGridLines:假，数据集填充:假，});

请注意，比例与第一个阴影对齐(它赋予它更 3D 的感觉)，但如果比例很重要，您可以将其移动到第一层(而这更像是一种粗略的图表)

<小时>

小提琴 -

I'm using chart.js to build a line chart. I was wondering if it is possible to add a drop shadow to the line chart I'm displaying. To clarify I mean add a drop shadow to the line itself. Like this:

Here is the code and code snippets.

// Line Chart
var ctx = document.getElementById("salesData").getContext("2d");

var gradient = ctx.createLinearGradient(0,0,700,0);
    gradient.addColorStop(0, 'rgba(255, 204, 128, 1)');   
    gradient.addColorStop(0.5, 'rgba(255, 152, 0, 1)');
    gradient.addColorStop(1, 'rgba(239, 108, 0, 1)');

var salesData = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
  datasets: [
    {
      label: "Front",
      fillColor: "rgba(0, 0, 0, 0)",
      strokeColor: gradient,
      pointColor: gradient,
      pointStrokeColor: "#202b33",
      pointHighlightStroke: "rgba(225,225,225,0.9)",
      data: [0, 10, 40, 48, 55, 64, 55, 72]
    }
  ]
};


window.myLineChart = new Chart(ctx).Line(salesData, {
  pointDotRadius : 0,
  pointDotStrokeWidth : 0,
  datasetStrokeWidth : 4,
  scaleShowVerticalLines: true,
  scaleGridLineWidth : 2,
  scaleShowGridLines : true,
  scaleGridLineColor : "rgba(225, 255, 255, 0.02)",
  scaleOverride: true,
  scaleSteps: 12,
  scaleStepWidth: 10,
  scaleStartValue: 0,

  responsive: true

});

<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<canvas id="salesData"></canvas>

解决方案

Extending the chart and overriding the draw function would be one (complicated) way to do this.

An easier way would be to duplicate the chart canvas with all the other elements (grid lines, scale labels...) hidden, style the line differently (thicker and in a gray shade). Then position this duplicate canvas under and to the bottom and right of the original canvas.

CSS

.shadowParent {
    position: relative;
}
.shadowParent canvas.firstShadow {
    position: absolute;
    left: 10px;
    top: 30px;
    z-index: -1;
}

HTML

<div class="shadowParent">
    <canvas id="myChartShadow" class="firstShadow" width="600"></canvas>
    <canvas id="myChart" width="600"></canvas>
</div>

Script

...

var ctxShadow = document.getElementById("myChartShadow").getContext("2d");
var dataShadow = JSON.parse(JSON.stringify(data));
dataShadow.datasets[0].strokeColor = "rgba(220,220,220,0.2)"
new Chart(ctxShadow).Line(dataShadow, {
    datasetStrokeWidth: 10,
    datasetFill: false,
    pointDot: false,
    showTooltips: false,
});

---

If your shadow isn't blurry enough you could add one more layer

CSS

.shadowParent canvas.secondShadow {
    position: absolute;
    left: 10px;
    top: 30px;
    z-index: -1;
}

HTML

<div class="shadowParent">
    <canvas id="myChartShadow2" class="secondShadow" width="600"></canvas>
    ...

Script

var ctxShadow2 = document.getElementById("myChartShadow2").getContext("2d");
var dataShadow2 = JSON.parse(JSON.stringify(data));
dataShadow2.datasets[0].strokeColor = "rgba(220,220,220,0.1)"
new Chart(ctxShadow2).Line(dataShadow2, {
    datasetStrokeWidth: 20,
    datasetFill: false,
    pointDot: false,
    showTooltips: false,
    scaleFontColor: "rgba(0,0,0,0)",
    scaleLineColor: "rgba(0,0,0,0)",
    scaleShowGridLines: false,
    datasetFill: false,
});

Note that the scale aligns with the first shadow (it gives it a more 3D feel), but you can move it to the first layer if the scale is important (vs. this being more of an rough look kind of graph)

---

Fiddle - http://jsfiddle.net/fjyj1021/

---

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