如果从你的这个例子来说，最下方两个蓝色貌似并不是渐变。。。56.8的黄色和89.2的红色还多少能说得上有渐变。
具体点说：

1. 最好是按照设计图来，如果有的话。

2. 如果没有设计图，那么，你拿ps，密集一点取色，确定你要的效果是不是渐变，至少这个图就不是。

3. 当然要是渐变肯定是线性渐变了。但是纯渐变，选三个颜色一拉，并不是什么好的注意，如果设计上技能点不够还是不要揽这个活。或者说你自己p图满意了再拿css折腾能省心不少。

打个比方：
var c=document.getElementById("canvas");

        var ctx=c.getContext("2d");

var graid=ctx.createLinearGradient(0,0,c.width,c.height);

        graid.addColorStop(0,"#0066ff");
        graid.addColorStop(0.2,"#00ffcc");
        graid.addColorStop(0.4,"#77ff00");
        graid.addColorStop(0.6,"#ffff00");
        graid.addColorStop(0.8,"#ff8800");
        graid.addColorStop(1,"#ff0000");

你看看，算不算平滑过渡？
这个rgb数值的变化都是靠你自己掌握的，你甚至可以写个js方法，让它每增加1%的高度，颜色值从0~255加一都可以的。楼主你这例子，是要做一样的？你先用颜色选择工具获取你能明显看出来的不同的几种颜色，然后再分别
graid.addColorStop(百分比,"颜色值");都行啊，干嘛那么死板?