流程图：在图表渲染后如何更改样式选项（例如通过代码注入）？

Question

是否可以动态更改 Flot 图表组件的样式 – 通过控制台还是脚本 – 在图表已渲染之后？即从 Flot 图表的内部配置（最初定义了图表的样式）外部的某个地方。

将我的问题转化为一个简单的用例：我有一个包含浮点图的页面，该图的条形颜色错误。使用 Web Inspector 的 JS 控制台，我想将条（线？）颜色从蓝色更改为棕色。 （而且我没有任何方法来编辑 jquery.flot.js 中的配置。）现在我希望从控制台注入代码，这可能会改变条形的颜色。

当我陷入困境时，我只希望得到基本代码结构的提示（不，我不是特别中级或高级用户）。

屏幕截图 1 – 渲染的图表，不受影响（箭头指示我要更改的内容）：

… < a href="http://flot.googlecode.com/svn/trunk/API.txt" rel="nofollow noreferrer">Flot 的 API 说：

$.plot(placeholder, data, options)

但我不想设置/更改数据（已绘制出来），我只想更改其颜色表示从蓝色到棕色。我设法实现的改变某事的唯一效果是这段（非常无能的）代码：

$.plot("#chart", { series: {color: "#6C564C"} });

它将图表变成（屏幕截图2）：

我不知道为什么图表消失了，而且我们不一定需要对此进行故障排除。我所寻找的只是通过代码注入来更改流程图选项的简单结构。

Answer 1

您可以通过更改数据对象并使用 setData() 来更改已绘制系列的颜色。这比再次调用 $.plot() 更快，但不会重新计算网格和刻度。如果您的实际数据点没有改变，这不是问题。

var data = [
    {
        label: "Your series",
        data: rawData,
        color: "#f00"
    }
]

// Initial draw:
var flotObject = $.plot("#chart", data, options);

// ...

// Change the colour:
data[0].color = "yellow"; // Change only the colour of the original data object
flotObject.setData(data);
flotObject.draw();