如何根据 x 轴刻度值设置 jqplot 图表的条形颜色？

Question

我想给某些 x 轴刻度范围内的条形图涂上不同于其他条形图的颜色，如下所示：

var plot = $.jqplot(id,
            [werteProzentual],
            {
                seriesColors:
                    [
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff"
                    ],
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    pointLabels: { show: true },
                    rendererOptions: { varyBarColor: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: wertgruppen,
                        label: "RR-Intervalle in Sekunden",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    },
                    yaxis: {
                        min: 0,
                        max: largestAmount,
                        tickOptions: {
                            formatString: "%d"
                        },
                        tickInterval: 5,
                        label: "Anteil in %",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    }
                },
                //...
                highlighter: { show: false },
                //...
            });

werteProzentual 是一个包含系列数据的数组。

wertgruppen 是一个包含刻度值的数组。

现在它是硬编码的，但我希望能够声明一系列具有不同条形颜色的 x 轴刻度，因为 x 轴将来会是动态的。

我需要能够为 0.75 到 1.05 范围内的条形着色，而不管 x 轴上有多少刻度。

Answer 1

我找到了解决问题的方法：

        //color x axis range from 0,75-1,05 in different color
        var specialTicks = ["0,75", "0,8", "0,85", "0,9", "0,95", "1", "1,05"];
        for (var i = 0; i < plot.seriesColors.length; i++)
            plot.seriesColors[i] = "#99ceff";

        for (var i = 0; i < specialTicks.length; i++)
            plot.seriesColors[plot.axes.xaxis.ticks.indexOf(specialTicks[i])] = "#0066cc";

此解决方案不需要初始化时的seriesColors 属性。这发生在初始化之后。

如何根据 x 轴刻度值设置 jqplot 图表的条形颜色？

How to set bar color of jqplot chart depending on x axis tick value?

javascript

jqplot