Wt 动态图表和图形

Posted 2023-02-22

【中文标题】Wt 动态图表和图形

【英文标题】：Wt Dynamic Charts and Graphs

【发布时间】：2013-07-15 08:51:47

【问题描述】：

使用 Wt，一个用于 Web 开发的 C 库，我正在尝试上传一个 .wav 文件，然后在图表中打印它的值。有没有办法动态地做到这一点，换句话说，将点添加到已经创建的图表中？

【参考方案1】：

是的，有一种方法可以做到这一点，我曾经编写了一些代码来监控内存使用情况并将该信息打印在图表中，就像 Windows 任务管理器的“性能”选项卡一样。我使用了一个 boost 线程来不断更新它。这里有一些代码可以帮助您解决图表问题。

你需要一个 WCartesianChart

Wt::Chart::WCartesianChart* _chart_memory_display;

现在，图表的初始化实际上非常棘手。我写了一个函数来做到这一点。 注意：这使用 #define PERFORMANCE_HISTORY 100 这是图表存储的数据量，据我所知没有限制，我只想要最后 100 个点。

Wt::Chart::WCartesianChart* CreateCartesianChart(WContainerWidget* parent)

WStandardItemModel *model = new WStandardItemModel(PERFORMANCE_HISTORY, 2, parent);

//Create the scatter plot.
Wt::Chart::WCartesianChart* chart = new Wt::Chart::WCartesianChart(parent);
//Give the chart an empty model to fill with data
chart->setModel(model);
//Set which column holds X data
chart->setXSeriesColumn(0);

//Get the axes
Wt::Chart::WAxis& x_axis  = chart->axis(Wt::Chart::Axis::XAxis);
Wt::Chart::WAxis& y1_axis = chart->axis(Wt::Chart::Axis::Y1Axis);
Wt::Chart::WAxis& y2_axis = chart->axis(Wt::Chart::Axis::Y2Axis);

//Modify axes attributes
x_axis.setRange(0, PERFORMANCE_HISTORY);
x_axis.setGridLinesEnabled(true);
x_axis.setLabelInterval(PERFORMANCE_HISTORY / 10);

y1_axis.setRange(0, 100);
y1_axis.setGridLinesEnabled(true);
y1_axis.setLabelInterval(10);

y2_axis.setRange(0, 100);
y2_axis.setVisible(true);
y2_axis.setLabelInterval(10);

//Set chart type
chart->setType(Wt::Chart::ChartType::ScatterPlot);

// Typically, for mathematical functions, you want the axes to cross at the 0 mark:
chart->axis(Wt::Chart::Axis::XAxis).setLocation(Wt::Chart::AxisValue::ZeroValue);
chart->axis(Wt::Chart::Axis::Y1Axis).setLocation(Wt::Chart::AxisValue::ZeroValue);
chart->axis(Wt::Chart::Axis::Y2Axis).setLocation(Wt::Chart::AxisValue::ZeroValue);

// Add the lines
Wt::Chart::WDataSeries s(1, Wt::Chart::SeriesType::LineSeries);
chart->addSeries(s);

//Size the display size of the chart, has no effect on scale
chart->resize(300, 300);

return chart;

基本上，WT 图表需要一个模型和一个数据系列来准备接收数据。我强烈建议您阅读文档，了解您不认识的功能中的任何内容，我花了一些时间将这些部分拼凑起来。另外，请查看 WT 小部件库，其中包含图表和代码示例。

现在，为了实际更新，我写了另一个函数。

void UpdateChartDisplay(Wt::WAbstractItemModel* data_model, double data)

//Update the old data
for(unsigned int i = 0; i < PERFORMANCE_HISTORY; i++)

  //Move all data back one index
  data_model->setData(i, 0, i);
  data_model->setData(i, 1, data_model->data(i+1, 1));


//Get the last index of the data
int insertion_point = PERFORMANCE_HISTORY - 1;

//Insert new data at the last index
data_model->setData(insertion_point, 0, insertion_point);
data_model->setData(insertion_point, 1, data);

现在，data_model 只是正在更新的图表的模型，

_chart_memory_display->model()

进来的双，是被添加到图表中的数据本身。我有一个 boost 线程每秒调用这个函数，传入新数据，它在运行时看起来和任务管理器一模一样。我不确定您是尝试动态更新它还是只是用数据填充它，但我希望这对您有所帮助并使您走上正轨！

【讨论】：

非常感谢。我一直在努力处理 Wt 示例，这些示例太复杂了——它们应该提供一个非常简单的工作示例。我发现的 Wt 文档非常密集，似乎并没有一步一步地简单地解释如何做某事。如果您知道一些这样做的文档，请告诉我。我喜欢 Wt 并且在跟上它的速度方面几乎没有问题，并且有许多其他 GUI 框架的经验。但是图表的东西很讨厌。

我找到的唯一可靠的文档是他们的标准文档webtoolkit.eu/wt/doc/reference/html/index.html 和小部件库。他们还有一个官方论坛redmine.webtoolkit.eu/projects/wt/boards，您可以在其中向社区或开发人员发布问题。您也可以向开发人员请求功能，实际上我不久前就获得了批准：D Feature #3175 redmine.webtoolkit.eu/issues/3175#change-9919 除此之外，我只是谷歌或通过 Stack Overflow 挖掘。

我已经看过大部分这些东西了 - 谢谢。 除此之外，我只是谷歌或通过 Stack Overflow 进行挖掘：大多数情况下，我只是不断地破解，直到我得到一些工作。在使用 Qt 和 gtkmm 进行了大量工作后，我发现 Wt 大多数时候都非常优雅和直观——我使用它运行起来非常快。但是图表很糟糕 - 并不是说​​它在其他框架中更好 - 好的图表本质上是复杂的，特别是如果你正在使用它们进行实时更新。严重缺乏的是一本关于 Wt 的好书，它可以组织事物并引导您完成。我喜欢 Wt - 非常强大的东西。

【参考方案2】：

我认为当您有一个模型并更新该模型时，图表会自动更新为视图。

创建您自己的模型并在那里执行您的业务逻辑。让 Wt 处理图表视图。