Html5 canvas 如何使用Chart.js为每个数据集设置不同的图例数据样式？

我已经用chart.js创建了一个图表，现在我需要根据两个不同的数据集在图例中以不同的方式显示数据

如何以经典矩形/填充样式显示第一个数据集“低/高范围限制”，以点样式显示数据集“患者结果”

（奖励：目前，我正在正确地显示第二个数据集。我还想用纯色“钢蓝”完全填充圆圈，而不是透明。）

（我会提供一张图片，但我需要至少10个声誉来发布它们。）

.chart容器{宽度：550px}
var context=document.getElementById（'myChart'）；
var myChart=新图表（上下文{
键入：“行”，
数据：{
标签：['（A）'（B）'（C）'（D）'，
数据集：[
{
标签：“患者结果”，
数据：[40230,30,60]，
边框颜色：“钢蓝色”，
边界宽度：2，
pointBackgroundColor:“钢蓝”，
填充：假，
spanGaps:true//如果为true，则在没有或空数据的点之间绘制直线。如果为false，则具有NaN数据的点将在直线中创建打断。
},
{
数据：[0,30,20,20]，//仅代表下限
边框颜色：'#222'，
边界宽度：2，
点半径：0，
填充：是的，
背景颜色：“#fff”
},
{
标签：“低/高范围限制”，
数据：[60,150,50,40]，//仅代表高量程
边框颜色：'#222'，
边界宽度：2，
点半径：0，
填充：是的，
背景颜色：“#c2e8f5”
}
]
},
选项：{
要素：{
行：{
张力：0//禁用贝塞尔曲线
}
},
图例：{
标签：{
箱宽：6，
过滤器：函数（legendItem、chartData）{
if（legendItem.datasetIndex==1）{
返回false；
}
返回true；
},
usePointStyle:true
},
位置：'右'，
反向：true//首先显示“低/高范围限制”
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

<style>
.chart-container { width: 550px }
</style>

<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
    type: 'line',
    data: {
        labels: ['(A)', '(B)', '(C)', '(D)'],
        datasets: [
            {
                label: 'Patient Results',
                data: [40, 230, 30, 60],
                borderColor: 'steelblue',
                borderWidth: 2,
                pointBackgroundColor: 'steelblue',
                fill: false,
                spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
            },
            {
                data: [0, 30, 20, 20], // representing the low range only
                borderColor: '#222',
                borderWidth: 2,
                pointRadius: 0,
                fill: true,
                backgroundColor: '#fff'
            },
            {
                label: 'Low/High Range Limit',
                data: [60, 150, 50, 40], // representing the high range only
                borderColor: '#222',
                borderWidth: 2,
                pointRadius: 0,
                fill: true,
                backgroundColor: '#c2e8f5'
            }
        ]
    },
    options: {
        elements: {
            line: {
                tension: 0 // disables bezier curves
            }
        },
        legend: {
            labels: {
                boxWidth: 6,
                filter: function(legendItem, chartData) {
                    if (legendItem.datasetIndex === 1) {
                        return false;
                    }
                    return true;
                },
                usePointStyle: true
            },
            position: 'right',
            reverse: true // shows 'Low/High Range Limit' first
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>