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

【问题标题】：Default visual style in Chart.js bar chartChart.js 条形图中的默认视觉样式
【发布时间】：2013-06-17 19:15:43
【问题描述】：

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

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);创建图表

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

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

官方选项不希望这样。

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

【问题讨论】：

标签： javascript html canvas charts

【解决方案1】：

您是正确的，chartjs 不支持将这些属性作为全局选项。

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

data.datasets[i].fillColor

...例如：

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

...导致类似于：

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

这同样适用于strokeColor。

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

【讨论】：

【解决方案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

【讨论】：

是官方发布的选项合并还是你想要的？ fillColor 在options 段落中的官方文档中没有描述
@cggaurav 不错的发现！ Bob 是否可以从实例化图表中提取“当前设置”选项以进行自己的合并，以免在他没有再次明确设置时将任何已设置为默认值的内容重置为默认值？
啊，据我了解，fillColor 和 strokeColor 是 ctx 的属性，你必须通过 fork ChartJS 来改变它。 ctx.fillStyle = 你的填充颜色； ctx.strokeStyle = YourstrokeColor;
@cggaurav 所以你的答案中的第二行不起作用？ :( 因为它看起来正是我想要使用它的方式
@BinaryBob 因此，如果您编辑 ChartJS 的代码但确实在 github.com/nnnick/Chart.js/issues 提交功能请求，上述方法将起作用