如何设置 jqplot 条形图每条的颜色?

发布于 2024-10-01 09:16:11 字数 382 浏览 2 评论 0原文

我正在尝试设置 jqplot 条形图条形的颜色。始终存在 6 个小节,分为 2 个小节组成的组。以下是绘制数据的示例:

 line1 = [6000, 5000, 5500];
 line2 = [16000, 10000, 14000];

到目前为止,我已使用以下内容:

 seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501", "#027997", "#CF3501", "#027997"],

但 jqplot 每次都会在前 2 个条之间交替,而不是使用所有声明的颜色。这可能是因为它只确定存在 2 个系列,每组数据一个。

有没有办法明确设置条形颜色?

I'm trying to set the colours of my jqplot bar chart bars. There will always be six bars present, grouped into sets of 2 bars. Here is an example of the data being plotted:

 line1 = [6000, 5000, 5500];
 line2 = [16000, 10000, 14000];

I've used the following so far:

 seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501", "#027997", "#CF3501", "#027997"],

But jqplot alternates between the first 2 bars each time instead of using all of the declared colours. This is probably as it only determines 2 series being present, one per set of data.

Is there a way to set the bar colours explicitly?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

莫多说 2024-10-08 09:16:11

我使用 varyBarColor 方法来执行此操作 因此,您可以在一个简单的数组中列出条形的不同颜色,就像您已经完成的那样,但如果只有一个系列,它将为每个条形使用这些颜色。下面是我的代码示例:

plot1 = $.jqplot('chart1', [s1], {
        title: 'Example Income Graph',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions:{ varyBarColor : true },
            pointLabels: { show : true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                label:'Net Growth (%)',
                ticks: ticks
            },
            yaxis:{
              label:'Income (£)',
              tickOptions:{ formatString:'%d'},
              autoscale:true,
              min:0, 
              max:10000
            }
        },
        seriesColors: [ "#eee", "#ccc", "#999"],
        highlighter: { show: false }
    });

在这张图中,我有一个包含 3 个条形的系列,每个条形的颜色都是不同的灰色。

I do this using the varyBarColor method so you can list the different colours for the bars in a simple array like you have done already but if there is only one series it will use these colors for each bar instead. Here is an example of my code:

plot1 = $.jqplot('chart1', [s1], {
        title: 'Example Income Graph',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions:{ varyBarColor : true },
            pointLabels: { show : true }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                label:'Net Growth (%)',
                ticks: ticks
            },
            yaxis:{
              label:'Income (£)',
              tickOptions:{ formatString:'%d'},
              autoscale:true,
              min:0, 
              max:10000
            }
        },
        seriesColors: [ "#eee", "#ccc", "#999"],
        highlighter: { show: false }
    });

In this graph I had one series with 3 bars and they are each a different colour grey.

拧巴小姐 2024-10-08 09:16:11

这是相当古老的,但仍然没有正确的答案,我花了一段时间才弄清楚,所以就在这里。

你需要两件事:
设置variableBarColor和一个包含每个系列的系列颜色的系列数组,与seriesDefaults在同一级别传递,例如:

plot1 = $.jqplot('chart1', [s1, s2], {
            title: 'Example',
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{ varyBarColor : true },
                pointLabels: { show : true }
            },
            series: [{seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"]},
                     {seriesColors: ["#027997", "#CF3501", "#027997"]}]
            }

This is pretty old, but still doesn't have the right answer, and it took me a while to figure it out, so here it goes.

You need two things:
Set the varyBarColor and a series array that contains the series colors for each series, passed at the same level as seriesDefaults, such as:

plot1 = $.jqplot('chart1', [s1, s2], {
            title: 'Example',
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{ varyBarColor : true },
                pointLabels: { show : true }
            },
            series: [{seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"]},
                     {seriesColors: ["#027997", "#CF3501", "#027997"]}]
            }
孤蝉 2024-10-08 09:16:11

尝试这样

series:[{renderer:$.jqplot.BarRenderer , seriesColors: ["#F3CBBF", "#BFDDE5", #CF3501","#eee", "#ccc", "#999"] }]

try like this

series:[{renderer:$.jqplot.BarRenderer , seriesColors: ["#F3CBBF", "#BFDDE5", #CF3501","#eee", "#ccc", "#999"] }]
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文