Question

我在HTML页面上创建了一个Flot图表。我正在尝试为我的项目创建一个UI html模板。

HTML页面：

<div id="page-wrapper">
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            SKILL REPORT
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-bar-chart"></div>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>

Bar-Chart.js文件：

$(function () {

    var barOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 43200000


            }
        },
        xaxis: {
            mode: "time",
            timeformat: "%m/%d",
            minTickSize: [1, "day"]
        },
        grid: {
            hoverable: true
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: "x: %x, y: %y"
        }
    };
    var barData = {
        label: "bar",
        data: [
            [1354521600000, 1000],
            [1355040000000, 2000],
            [1355223600000, 3000],
            [1355306400000, 4000],
            [1355487300000, 5000],
            [1355571900000, 6000]
        ]
    };
    $.plot($("#flot-bar-chart"), [barData], barOptions);
});

Morris-data.js文件：

$(function() {
Morris.Bar({
        element: 'morris-bar-chart',
        data: [{
            y: '2006',
            a: 100,
            b: 90
        }, {
            y: '2007',
            a: 75,
            b: 65
        }, {
            y: '2008',
            a: 50,
            b: 40
        }, {
            y: '2009',
            a: 75,
            b: 65
        }, {
            y: '2010',
            a: 50,
            b: 40
        }, {
            y: '2011',
            a: 75,
            b: 65
        }, {
            y: '2012',
            a: 100,
            b: 90
        }],
        xkey: 'y',
        ykeys: ['a', 'b'],
        labels: ['Series A', 'Series B'],
        hideHover: 'auto',
        resize: true
    });

});

我需要为图表中的每个条形设置单独的颜色。有人可以帮我解决这个问题吗？

提前致谢...

Answer 1

渲染图表后，您可以使用jquery代码选择它并相应地改变颜色。

下面的

是chart.js之一的示例。

 myObjBar.datasets[0].bars[0].fillColor = "green";

Answer 2

＆＃34;数据＆＃34;旁边你需要提供一个＆＃34; barColors＆＃34;属性，其值是与条形对应的颜色数组。例如

$(function() {
Morris.Bar({
        element: 'morris-bar-chart',
        data: [{
            y: '2006',
            a: 100,
            b: 90
        }, {
            y: '2007',
            a: 75,
            b: 65
        }, {
            y: '2008',
            a: 50,
            b: 40
        }, {
            y: '2009',
            a: 75,
            b: 65
        }, {
            y: '2010',
            a: 50,
            b: 40
        }, {
            y: '2011',
            a: 75,
            b: 65
        }, {
            y: '2012',
            a: 100,
            b: 90
        }],
        xkey: 'y',
        ykeys: ['a', 'b'],
        barColors: ['#ff0000', '#00ff00'],
        labels: ['Series A', 'Series B'],
        hideHover: 'auto',
        resize: true
    });

});

在Flot Bar Chart上的每个条上设置特定颜色

2 个答案: