chart.js设置各种颜色不生效-fillColor不起作用-原来是chart.js版本的问题 及 推荐一个基于轻量级的精简web在线富文本编辑器wangEditor

一、chart.js设置各种颜色不生效-fillColor不起作用-原来是chart.js版本的问题

    之前用highcharts用得比较多，最近准备开始用一下chart.js，不过在使用过程中碰到了麻烦的事情。怎么设置都不生效：

data: {
     labels :json.date,
     datasets : [
	 {
	     label: json.area[1],
	     fillColor : "rgba(151,187,205,0.5)",
	     strokeColor : "rgba(151,187,205,1)",
	     pointColor : "rgba(151,187,205,1)",
	     pointStrokeColor : "#fff",
	     data : json.one[1],
	 },
     ]
}

     我也怀疑是版本的问题，因为之前包括使用bootstrap时也碰到这类问题，但bootstrap里的官方文档（见地址：http://www.bootcss.com/p/chart.js/docs/） 里根本没提过版本的差异，我就按照文档里的操作，页面数据能加载出来，但就是颜色不出来。版本不能向后兼容，也没有明确的提示和告诉用户，这真是个坑啊，白浪费别人时间！

1. 问题根源

    最后发现这个chart.js主要版本是1.x版本和2.x版本，文档地址都不一样：其中 1.x版本的文档：http://www.bootcss.com/p/chart.js/docs/  即bootstrap里的文档；而 2.x版本的文档：http://www.chartjs.org/docs/#scales-category-scale chart.js 的官方文档。

从这里可以看出chart.js入住了bootstrap,但在bootstrap里的文档没有更新，也没有说明。坑！

    2.x版本的chart.js不再使用上面这些fillColor,strokeColor之类的颜色设置键名，所以我怎么修改也不起作用，新的文档地址里写的很清楚：

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};

    这下就简单了，使用上面这些键名颜色设置就能起作用。本次是为了练习一个python的抓取，所以写了个小东西：http://house.linge/ ，抓取了青岛市的住宅交易量数据，趋势图截图如下：

2. 相关评论如下：

Level : 1.    User：us20180518143401-312    Time：2018-05-18 14:34:46
渐变可以做不？

Level : 2.    User：us20180518143401-312    Time：2018-05-18 14:34:59
背景颜色渐变

Level : 3.    User：us20190510101358-715    Time：2019-05-10 10:17:07
感谢老铁分享

3.相关备注

    上述图表所示的网站为一个显示青岛市一手房和二手房的成交统计数据走势。大约2019年开发，当时开发此网站的目的只是为了用一下python爬虫抓取开发。

网站代码已上传至 Github ，代码地址链接：GitHub - KermitCode/python-beautifulsoup-house-data-site: 使用python中BeautifulSoup模块抓取房产成交数据呈现商品房、二手房的成交走势，从而关注房产行情。抓取数据入数据表中，前端展示使用PHP简单写了点程序，写此程序是只是为了熟悉python的数据抓取，页面呈出也未进行其它美化处理，只是用bootstrap简单进行呈现，

二、推荐一个基于轻量级的精简web在线富文本编辑器wangEditor

    推荐一个轻量级web富文本编辑器，官网地址：http://www.wangeditor.com/index.html 使用起来方便，特别是去除一些麻烦的加载这加载那。wangEditor时面不需要引用任何CSS文件，这是我以前在加载其它的编辑器时很烦的事情，有的还不只加载一个，真让人烦。而wangEditor深知编辑器的用户就是不想去加载过多的东西。示例代码如下：

#编辑器文件
<div class="form-group">
     <div id="divDemo" class="col-sm-10 col-sm-offset-1">这是一个测试用例</div>
</div>

#加载js文件
<script type="text/javascript" src='//unpkg.com/wangeditor/release/wangEditor.min.js'></script>                            
<script language='javascript'> 
$(function(){
    var E = window.wangEditor
    var editor = new E('#divDemo')
    editor.customConfig.uploadImgShowBase64 = true
    editor.create()  
});
</script>

    代码运行示例如下，在这里编辑内容。不过在使用的时候也碰到一个小问题：我在页面中因为有使用bootstrap的弹出层，但是在页面的加载中出现了这个编辑器的内容在弹出层之上，如下图所示，

    弹出层里可以看见wangEditor里面的按钮，在经历了几个样式调试后，发现给上面的divDemo层加上了z-index属性可以解决：

<div id="divDemo" class="col-sm-10 col-sm-offset-1" style="z-index:2;"></div>