Chart.js条形图中的默认视觉样式

Bin*_*Bob 7 javascript charts html5 canvas

该文档给出了一个关于条形图的小例子:

var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

然后使用创建图表 new Chart(ctx).Bar(data);

是否可以与数据分开定义视图,即定义和仅在对象中保留的其他位置?假设我只想在数据集中设置一组.fillColorstrokeColordatadatasets

我想在后端生成数据(标签和值),并将视图详细信息留给前端.

官方选项不期望这样.


Doc: http ://www.chartjs.org/docs/#barChart

eme*_*esx 5

你是正确的,因为不支持这些属性作为全局选项.

幸运的是,快速修复将要求您仅更改源代码行,包括...

data.datasets[i].fillColor
Run Code Online (Sandbox Code Playgroud)

......比如说:

config.fillColor || data.datasets[i].fillColor
Run Code Online (Sandbox Code Playgroud)

...导致类似于:

ctx.fillStyle = config.fillColor || data.datasets[i].fillColor;
Run Code Online (Sandbox Code Playgroud)

这同样适用于strokeColor.

然后,您可以将fillColor属性添加到全局配置或将其包含在数据集中.