是否可以添加投影到chart.js折線圖？

我使用chart.js來構建折線圖。我想知道是否可以添加投影到我所顯示的折線圖上。澄清我的意思是添加陰影線本身。就像這樣：是否可以添加投影到chart.js折線圖？

下面是代碼和代碼段。

// 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>

來源

2015-10-13 Andy Holmes

擴展圖表並重寫draw功能將是一個（複雜）的方式來做到這一點。

一個更簡單的方法是將所有其他元素（網格線，比例標籤...）複製到圖表畫布中，以不同的方式（更粗和灰色陰影）對線條進行樣式設置。然後將此重複畫布放置在原始畫布的底部和右側。

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>

腳本

... 

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="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)" 
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, 
});

請注意，比例尺與第一個陰影對齊（它給了它更多的3D感覺），但是如果比例很重要，您可以將其移動到第一個層面（vs.這是更大的粗看樣圖的）

小提琴的 - http://jsfiddle.net/fjyj1021/

來源

2015-10-14 11:57:51 potatopeelings

嗯，但隨後」會不會是一個純色？而不是看起來像一個影子？ –

您可以爲底層線設置透明度或灰色陰影（更好），並使其變得更厚以給出陰影類型的外觀。 – potatopeelings

嗯，是的，我明白你的意思，但沒有模糊，所以我不知道它實際上會有多少陰影 –

可以使用過濾器：

g.ct-series {filter:url(#shadow);} 
    <defs> 
     <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"> 
      <feDropShadow dx="2" dy="2" stdDeviation="6" flood-opacity="0.80" /> 
     </filter> 
    </defs>

來源

2017-06-29 19:32:51 mlimasolucoes

是否可以添加投影到chart.js折線圖？

回答

相關問題