如何更改浮动条填充和边框颜色

How to change the flot bar fill and border color?

本文关键字：边框 颜色 填充 何更改      更新时间：2023-09-26

我已经为我的代码点火器项目创建了一个用户图。条形填充设置为默认值。但我希望BARS更改它，使其看起来像此图像上的条形图：http://www.riwakawebsitedesigns.com/offsite/images/userchart.PNG

我回显来自控制器的数据。但我只是想知道如何使酒吧和酒吧边界看起来像上面的图像。

当我将这些shadowSize: 0, colors: ['#9FD5F1', '#1065D2'],添加到序列栏时，它不起作用。

<script type="text/javascript">
$(document).ready(function () {
   var data = <?php echo $data;?>;
    $.plot($("#chart-user"), [data],  {
        series: {
            bars: { 
                shadowSize: 0,
                show: true,
                fill: true,
                    //fillColor: '#9FD5F1'
            },
            grid: {
              backgroundColor: '#FFFFFF',
              hoverable: true
            }
        }
    });
});
</script>

我必须在下面做这件事，才能在系列下面添加颜色

<script type="text/javascript">
$(document).ready(function () {
   var data = <?php echo $data;?>;
    $.plot($("#chart-user"), [data],  {
        series: {
                color: '#1065D2',
            bars: { 
                    shadowSize: 0,
                show: true,
                fill: true,
            },
            grid: {
              backgroundColor: '#FFFFFF',
              hoverable: true
            }
        }
    });
});
</script>

我终于找到了答案。对于"条形图"，可以为每个系列指定fillColor。然后是全局系列颜色。条形图将填充fillColor，并使用线条的颜色。

以下示例使用2个不同的数据数组d1（Absent Time）、d2（Time Worked）和不同时间跨度的每个条的堆栈

例如：

var chartOptions = {
    xaxis: {
        min: 0,
        max: 100,
        ticks: [[25, '25%'], [50, '50%'], [75, '75%'], [100, '100%']]
    }, 
    yaxis: {
        ticks:   [[1, 'Today'], [2, 'Yesterday'], [3, 'This Week'],[4, 'Last Week']],
        position: 'right',
        font: { size: 12 }
    },
    series: {
        stack : true,
        bars: {
            horizontal: true,
            show: true
        }
    },
    colors: ['rgb(52,95,14)', 'rgb(108,105,19)'],
};
$.plot($('#placeHolder'), [{ data:d1, bars:{fillColor: 'rgb(194, 238, 155)', fill: 0.9}}, { data:d2, bars:{fillColor: 'rgb(241, 239, 177)', fill: 0.9}}], chartOptions);

显示的图表

相关文章：