使用图表定义JavaScript

在这个主题中，我们只讨论使用JavaScript和图表界面的DynamicChar工件。

通过JavaScript定义图表

您要做的第一件事是在适当的包中创建仪表板图。右键单击包并选择“新图表”选项。这将打开“模型构建器”对话框的“图表构建器”选项卡页面。

在“图表生成器”选项卡页面上，单击图标并选择透视图“发布 >动态图表”。在“选择来源”面板中，选择“动态图表”，然后在“图表类型”面板中选择“动态图表”。单击“创建图表”以创建新图表。当显示空图表时，将“动态图表”图标从工具箱的“图表”页面拖到其上。

现在，您可以编写JavaScript来设置图表样式并进行渲染，首先是 ConstructChart函数，该函数将在打开包含 DynamicChart工件图表进行查看时自动调用。元素的GUID将作为参数传递给 ConstructChart。在此函数中，您可以完全自行决定要显示图表类型、图表的样式、包含的系列数量以及构成系列的数据点。使用 Automation接口中的图表包，几乎可以显示您需要的任何图表。

在此示例中，您将创建一个分组列图表，显示几个月内的车辆费用。每个组代表一个月，并将细分为该月发生的各项费用。

首先，点击工件并按下 Alt+7，或点击“编辑图表脚本”上下文菜单选项；每种方法都会显示代码编辑器窗口。此处提供了要使用的代码，以及打开图表时生成的图表。

重要的是，注记：

!INC 当地的 脚本.图表自动化 语句；所有图表脚本都必须包含此语句
ConstructChart函数（第 7 行）

Code

!INC Local Scripts.ChartAutomation

var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];

function Rand(min, max) {
min = cephes.ceil(min);
max = cephes.floor(max);
return cephes.floor(cephes.drand() * (max - min)) + min; }

function ConstructChart( guid )
{
var chart as EA.Chart;                                     // The script first of all
var element = GetElementByGuid(guid);                  // declares the automation
var series1 as EA.ChartSeries;                          // objects it will use
var series2 as EA.ChartSeries;
var series3 as EA.ChartSeries;
var series4 as EA.ChartSeries;

chart = element.GetChart();

var chartCategory = ChartCategory.Column();
var chartType = ChartType.SIMPLE();
chart.SetChartType( chartCategory, chartType, false, true);

chart.Title = "Vehicle Expenses";
series1 = chart.CreateSeries("Fuel");            // The script then obtains the Chart object and creates the
series2 = chart.CreateSeries("Taxes");           // series. A chart is composed of a number of series, and
series3 = chart.CreateSeries("Maintenance");    // in this example each series will represent a type of expense.
series4 = chart.CreateSeries("Other");

series1.AddDataPoint3( monthNames[0], 14);   // A series is composed of a number of datapoints and, here, the
series1.AddDataPoint3( monthNames[1], 4);    // script adds the values for each of the points to each series.
series1.AddDataPoint3( monthNames[2], 3);
series1.AddDataPoint3( monthNames[3], 2);
series1.AddDataPoint3( monthNames[4], 1);

series2.AddDataPoint(10);
series2.AddDataPoint(12);
series2.AddDataPoint(15);
series2.AddDataPoint(17);
series2.AddDataPoint(12);

series3.AddDataPoint(5);
series3.AddDataPoint(7);
series3.AddDataPoint(11);
series3.AddDataPoint(14);
series3.AddDataPoint(19);

series4.AddDataPoint(2);
series4.AddDataPoint(3);
series4.AddDataPoint(5);
series4.AddDataPoint(3);
series4.AddDataPoint(2);

series1.SetGroupID(0);
series1.SetGroupID(0);
series3.SetGroupID(1);
series4.SetGroupID(1);

chart.Redraw();
}

输出

这是代码生成的图表。

调试动态图表

创建 Dynamic图表JavaScript ，您可以像调试任何其他代码一样对其进行调试。右键单击图表中的动态图形并选择“调试图表脚本”选项。该脚本显示在调试视图中。

进一步的例子

示例模型中提供了进一步的编码示例（参见包“报告 > 图表 > 动态图表”）。每个图表示例都提供了一个仪表板图和一个 DynamicChart元素。选择这些元素中的任何一个并按 Alt+7 以查看图表背后的行为代码。参考这些示例是了解如何编写每种类型的图表的最佳方式。

JavaScript是使用自动化编码动态图表的主要语言。但是，第三方自动化客户端参与该过程当然是可行的， JavaScript主机将任务委派给C#和C++等语言的自动化客户端，可能能够从模型外部获取数据不适用于脚本。