7

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

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

是否可以将视图与数据分开定义,即定义fillColorstrokeColor其他地方只留下对象?假设我只想要数据集中的一组。datadatasets

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

官方选项并不期望这一点。


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

4

2 回答 2

5

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

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

data.datasets[i].fillColor

...例如:

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

...导致类似于:

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

这同样适用于strokeColor

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

于 2013-06-19T10:32:42.737 回答
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

于 2013-06-17T19:26:05.653 回答