甜甜圈（量规）的自定义背景限制

Question

我正在使用基于（Chartjs-tsgauge）的仪表图。我想将图表的背景色与量规限制分开设置。Charts.JS如何呈现背景的问题是因为我使用的插件没有关于背景的代码。例如，我有一个带有极限的量规[0, 20, 40, 60, 80, 100]。我要设置[0-30]为绿色，[30-70]黄色和[70-100]红色。当前代码：CodePEN

这是我目前的选择。

var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
    type: "tsgauge",
    data: {
        datasets: [{
            backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
            borderWidth: 0,
            gaugeData: {
                value: 7777,
                valueColor: "#ff7143"
            },
            gaugeLimits: [0, 3000, 7000, 10000]
        }]
    },
    options: {
            events: [],
            showMarkers: true
    }
});

这是我设置背景颜色的方法。

new Chart(ctx, {
    type: "tsgauge",
    data: {
        datasets: [{
            backgroundColor: ["#0fdc63", "#fd9704", "#ff7143"],
            borderWidth: 0,
            gaugeData: {
                value: 50,
                valueColor: "#ff7143"
            },
            gaugeLimits: [0, 20, 40, 60, 80, 100],
            gaugeColors: [{
                min: 0,
                max: 30,
                color: ""
                }, {
                min: 30,
                max: 70,
                color: ""
             },{
                min:70,
                max:100,
                color: ""
             }]
         }]
    },
    options: {
        events: [],
        showMarkers: true
    }
});

目前Chart.JS将颜色匹配0到i，限制0为i。我还认为可以绘制另一个具有所需颜色的虚拟图表，并将其设置在真实图表的顶部，但这似乎有些可疑。

Answer 1

以前的解决方案

您可以稍微更改数据集来实现这一点：

backgroundColor: ["green", "green", "green", "yellow", "yellow", "yellow", "yellow", "red", "red", "red"],
gaugeLimits: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],

由于您当前gagueLimits被分成了一个范围20，所以您无法访问 30 的限制，

因此，我在这里所做的详细阐述了 的guageLimits分割范围10，现在30可以访问，因此70，

现在关于颜色，每个颜色都guageLimits需要数组中的颜色backgroundColor，我相应地设置它们，检查上面的数组。由于相应的颜色都不能为空，因此您可能需要使用相同的颜色，直到到达下一个颜色范围。

更新的解决方案

您的要求现已明确：

• 您希望仪表标签不要太舒适，这就是限制为 20 个的原因。
• 您希望将颜色范围分为 30 和 70 点。

现在，从技术上讲，如果您想将颜色范围设置为特定点，则需要在数组中包含该值gaugeLimits，因此您的简化gaugeLimits数组现在变成这样：

gaugeLimits: [0, 20, 30, 40, 60, 70, 80, 100],

好吧，不，您可以相应地设置颜色，因为您已经在数组中指定了点。因此，backgroundColor数组是：

backgroundColor: ["#0fdc63", "#0fdc63", "#fd9704", "#fd9704", "#fd9704", "#ff7143", "#ff7143"]

现在，最后的绝招

您仍然需要隐藏比例尺中的 30 和 70，我尝试在代码中切换showMarkers，看起来它完全启用或禁用可见数字比例尺，我尝试提供一个字符串数组，但它只接受boolean

Chartjs-tsgauge没有提供太多关于可用选项的文档，所以我潜入代码并发现markerFormatFn

它的作用是将函数作为参数，您可以提供一个函数来告诉您如何处理每个标记项。

所以，我想出了一个想法，提供一个函数，只显示能被20整除的数字，没有余数，否则返回空字符串，如下所示：

markerFormatFn: n => n % 20 === 0 ? n.toString() : '',

检查片段：

backgroundColor: ["green", "green", "green", "yellow", "yellow", "yellow", "yellow", "red", "red", "red"],
gaugeLimits: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],

gaugeLimits: [0, 20, 30, 40, 60, 70, 80, 100],

backgroundColor: ["#0fdc63", "#0fdc63", "#fd9704", "#fd9704", "#fd9704", "#ff7143", "#ff7143"]