我可以根据图表中的给定阈值设置不同的填充颜色吗.js

Can I set different fill color based on a given threshold in Chart.js?

本文关键字：设置 填充 js 颜色 阈值 我可以      更新时间：2023-09-26
是否可以

为图表中高于或低于给定阈值的值使用不同的填充颜色.js（图表.js）？

我在 Chart 中找不到任何执行此操作的选项.js，以前有人做过这样的事情吗？我更喜欢使用图表.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: [-640, -665, -700, -640, -630, -623],
            fillOpacity: 0,
            lineColor: 'rgba(20, 94, 204, 1)',
            marker: {
                fillColor: 'rgba(255,255,255,1)',
                lineColor: 'rgba(20, 94, 204, 1)',
                lineWidth: 1
            }
        }]
    });
});

我使用 gradientStroke 命令做了类似的事情，然后将其应用于 backgroundColor：

var ctx = document.getElementById("YearsExperience").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");
var YearsExperience = new Chart(ctx, {
    type: 'bar',
    data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] },
    options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } }
    });

可以在此处看到输出的示例：http://neophytte.mine.nu/portfolio/skills.html

相关文章：