Chart.js-添加渐变而不是纯色-实现解决方案 [英] Chart.js - add gradient instead of solid color - implementing solution

问题描述

我正在使用Chart.js，一切正常，但是我想用渐变色替换当前的颜色背景（fillColor： rgba（250,174,50,0.5））。
我有替换梯度的解决方案，但是我对这方面的JS知识不太了解，因此实在太难了。我想对了解JS的人来说很容易。

I am using Chart.js and everything is ok, but I want to replace current color background (fillColor : "rgba(250,174,50,0.5)") with a gradient. I have solution for replacing gradient but it's too dificult for me to implement this with my poor JS knowledge. I guess pretty easy for someone who know JS.

所以我的Chart.js代码：

        <script>

        var data = {
            labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
            datasets: [
                {
                    fillColor : "rgba(250,174,50,0.5)",
                    strokeColor : "#ff6c23",
                    pointColor : "#fff",
                    pointStrokeColor : "#ff6c23",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#ff6c23",
                    data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
                }
            ]
        };

        var options = {
            responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,
            tooltipFillColor: "rgba(0,0,0,0.8)",
            tooltipFontStyle: "bold",
            tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
            scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
        };

        var ctx = document.getElementById("temp-chart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

    </script>

和这是渐变解决方案。有人可以尝试实现此渐变背景，而不是我当前的纯色背景吗？谢谢您的帮助。

And here is solution with gradient. Can someone try implement this gradient background instead of my current solid background? Thanks for help.

我尝试实现它，但是随后其他功能不起作用（例如scaleLabels等）。

I tryed implement it, but then other functions don't work (like scaleLabels etc.).

推荐答案

您提供的链接非常清晰，您必须在数据集中的 fillColor 字段中放置一个linearGradient对象，而不是纯色。您可以进行复杂的渐变，但这是一个简单的渐变的代码（更改相同橙色的不透明度）：

The link you provided was pretty clear, you have to put in the field fillColor in datasets a linearGradient object instead of a plain color. You can do complex gradients, but here is the code of a simple one (changing the opacity of the same orange) :

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');   
gradient.addColorStop(1, 'rgba(250,174,50,0)');

以及完整的数据集：

datasets: [
            {
                fillColor : gradient, // Put the gradient here as a fill color
                strokeColor : "#ff6c23",
                pointColor : "#fff",
                pointStrokeColor : "#ff6c23",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "#ff6c23",
                data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
            }
        ]

在此 JSFiddle

这篇关于Chart.js-添加渐变而不是纯色-实现解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！