Question

我为codeigniter项目创建了一个用户图。条形填充设置为默认值。但我希望 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>

Answer 1

我必须在下面执行此操作才能使其在系列

下添加颜色

<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>

Answer 2

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

以下示例使用2个不同的数据阵列d1（缺席时间），d2（工作时间）和不同时间跨度的每个条形图堆栈

E.g：

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);

The displayed chart

如何更改flot bar填充和边框颜色？

2 个答案: