Question

如何使用 flot 插件和 graphTable 更改线条颜色：

$('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px'});

但是我想改变graphTable选项中的颜色，例如：

$('table.statics').graphTable({series: 'columns', position : 
       'replace', height : '180px', 
       colors: ["#92d5ea", "#666699", "#be1e2d", "#ee8310", "#8d10ee"]});

然后，生成的flot图中的每一行都会有来自列的相应颜色。

Answer 1

在flot中，您可以指定特定系列的颜色：

//series object
{
  data: rowData,
  label: label,
  color: '#92d5ea'
}

查看graphTable插件，有两行这样的一行：

tableData[tableData.length] = { label: label, data: rowData };

这就是创建系列对象的地方。所以你必须弄清楚那个区域的颜色，然后设置它。

编辑：如果您希望能够通过graphTable调用进行设置，则必须编辑graphTable插件并添加colors参数作为可能性。方法如下：

//find the line after "var args = {" and add this
colors: null,

然后，而不是

tableData[tableData.length] = { label: label, data: colData };

把这个：

var series = {label: label, data: colData };
if (args.colors && args.colors[j-args.dataStart]){
    series.color = args.colors[j-args.dataStart]
}
tableData[tableData.length] = series;

注意我只展示如何处理列部分，而不是行。现在你可以这样做：

$('#table1').graphTable({series: 'columns', colors: ['red','red','blue']});

结果看起来像this（由于没有excanvas，在IE中不起作用）。

jQuery Flot和graphTable Colors

1 个答案: