相关疑难解决方法(0)

在Chart.js(Chart.js)中,是否可以为高于或低于给定阈值的值设置不同的填充颜色？

我在Chart.js中找不到任何选项,有人之前做过这样的事吗？我更喜欢在Highcharts上使用Chart.js.

像这样:Highcharts的例子

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JS

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
        },
        yAxis: {
            title: {
                text: '$'
            }
        },
        title: {
            text: 'Win/Loss'
        },
        series: [{
            name: 'Avg. ($)',
            data: [546, 342, -234, -540, 103, -345],
            threshold: -1,
            negativeFillColor: 'rgba(255,0,0,0.5)',
            fillColor: 'rgba(0,204,0,0.5)',
            lineColor: 'rgba(0,0,0,1)',
            marker: {
                fillColor: 'rgba(255,255,255,1)',
                lineColor: 'rgba(0,0,0,1)',
                lineWidth: 1
            }
        },{
            name: 'User ($)',
            data: …

我正在尝试使用 ChartJS 折线图创建看起来像这样的东西。我已经按照我的意愿获得了顶部渐变，但当我的数据值低于 0 时，我找不到一种方法来改变底部渐变。

我尝试根据我的数据使用一组不同的背景颜色，并尝试使用插件 beforeDraw 更改背景颜色（它将它们全部更改为相同的颜色）。