Question

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

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

然后使用new Chart(ctx).Bar(data);

创建图表

是否可以与数据分开定义视图，即在其他地方定义fillColor和strokeColor，只留下data在datasets个对象中？假设我只想在数据集中设置一组。

我想在后端生成数据（标签和值），并将视图详细信息留给前端。

官方选项不要指望这一点。

文件： http://www.chartjs.org/docs/#barChart

Answer 1

你是对的，因为chartjs不支持这些属性作为全局选项。

幸运的是，快速修复需要您只更改源代码行，包括...

data.datasets[i].fillColor

......比如：

config.fillColor || data.datasets[i].fillColor

......导致类似于：

ctx.fillStyle = config.fillColor || data.datasets[i].fillColor;

同样适用于strokeColor。

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

Answer 2

如果需要，您也可以根据服务器上的ChartJS选项计算选项，并将其作为参数传递给

new Chart(ctx).Bar(data,options);

像

new Chart(ctx).Bar(data,{fillColor : "rgba(151,187,205,0.5)", strokeColor :"rgba(151,187,205,1)",});

因为ChartJS在

中合并选项

function mergeChartConfig(defaults,userDefined){
    var returnObj = {};
    for (var attrname in defaults) { returnObj[attrname] = defaults[attrname]; }
    for (var attrname in userDefined) { returnObj[attrname] = userDefined[attrname]; }
    return returnObj;
}

您可以编辑它以获得您想要的效果！ https://github.com/nnnick/Chart.js/blob/master/Chart.js

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

2 个答案: