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

问题描述

我使用 chart.js 建立折线图。我想知道是否可以添加一个阴影到我正在显示的折线图。为了澄清我的意思是添加一个阴影到线本身。像这样：

这是代码和代码片段。

  // Line Chartvar 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 ，7，8]，数据集：[{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： 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>  

解决方案

扩展图表并覆盖 draw 函数将是一个（复杂的）方法。

一个更简单的方法是复制图表画布与所有其他元素（网格线，缩放标签...）隐藏，以不同的方式灰色阴影）。

CSS

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

HTML

 < div class =shadowParent> 
< canvas id =myChartShadowclass =firstShadowwidth =600>< / canvas> 
< canvas id =myChartwidth =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）
 new Chart（ctxShadow）.Line（dataShadow，{
 datasetStrokeWidth：10，
 datasetFill： false，
 pointDot：false，
 showTooltips：false，
}）; 
  

---

如果你的影子不够模糊，添加一个图层

CSS

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

HTML

 < div class =shadowParent> 
< canvas id =myChartShadow2class =secondShadowwidth =600>< / canvas> 
 ... 
  

脚本
$ b

  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，
}）; 
  

请注意，比例与第一个阴影对齐可以将它移动到第一层，如果规模是重要的（这更像是一个粗略的图形类型）。

---

Fiddle -

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屋！