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

时间:2018-04-03 15:49:40

标签: javascript jqplot

我想要将某些x轴刻度范围内的条形颜色与其他条形颜色不同,如下所示:enter image description here

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轴上有多少个刻度。

1 个答案:

答案 0 :(得分:0)

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

        //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属性。初始化后会发生这种情况。