使用 Google Chart API 的图表设计器

引言

图表设计器是一个在线 JavaScript 应用程序，允许您动态创建图表。我们大多数人使用 MS-Excel 或 MS-Word 创建图表，这需要一些工具知识。图表设计器为您提供了创建图表的相同功能。它基本上是 Google Chart API 的实现。任何人都可以为自己的用途创建这种应用程序，因为它提供了极大的便利和轻松；您只需提供图表的数据并单击一个按钮，您想要的图表就会为您准备好。图像将是 PNG 格式，因此您可以轻松使用它。以下是该应用程序：www.chartdesigner.cjb.net。

Google Chart API 基础知识

Google Chart API 可以动态生成可供任何 Web 应用程序使用的图表。可以使用各种类型的图表，例如

• 折线图
• 饼图
• 迷你图
• 条形图
• 维恩图
• 散点图
• 雷达图
• 映射
• Googl-o-meter

Google Chart API 返回 PNG 格式的图像以响应 URL。对于每种图像类型，您可以指定属性，例如大小、颜色和标签。动态生成图表的关键是以下 URL：http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World。

每个图表都必须提供三个必需的属性

chart type => cht
chart size  => chs
chart data => chd

还有一个第四个参数，地理区域，仅用于地图。有关 Google Chart API 的更多详细信息，请访问：http://code.google.com/apis/chart/。

如何使用 Chart API

正如我上面提到的，您所要做的就是使用 URL。让我逐步解释一下我所做的事情。

HTML 代码

在 HTML 中，我有一个下拉菜单，其中包含所有图表类型。在其 onchage() 事件中，将调用一个函数 GenerateAttributes() 方法，该方法将动态生成用户选择的图表的属性。以下代码解释了组合框的构造。

<select name="list" size="1" 
        class="style1" id="list" tabindex="0" 
        onchange=" GenerateAttributes()"  önfocus="help(4)">
  <option value="select">-Select One-</option>
  <option value="1"> Line Chart </option>
  <option value="2">Sparkline</option>
  <option value="3">Bar Chart</option>
  <option value="4">Pie Chart</option>
  <option value="5">Venn Diagram</option>
  <option value="6">Scatter Plot</option>
  <option value="7">Radar Chart</option>
  <option value="8">Map</option>
  <option value="9">Google-o-meter</option>
</select>

图表数据、大小和颜色的控件也用于 body 部分，因为没有必要动态生成这些文本框，因为数据、大小（强制）和颜色适用于所有图表。

img 标签用于显示动态生成的图表

<img id="chart"/> 

div 标签指定的区域将包含在调用 GenerateAttributes() 函数时将生成的所有 HTML。

< div id="opt"> </div>

JavaScript 代码

从这里开始，真正的代码开始。在脚本中，有三个函数：GenerateAttributes()，它在下拉菜单的 onchage 事件上调用，CreatChart()，它在按钮的 onclick 事件上调用，以及 map() 函数，该函数仅在用户从下拉列表中选择地图时调用。属性的动态生成使用 innerHTML 完成。如果用户从下拉菜单中选择折线图，则执行以下代码

function GenerateAttributes()
{
    var list=document.getElementById('list')
            
    if(list[1].selected) // line
    {
        opt.innerHTML="*Line Chart Type:<br><input type=radio" + 
                      "  önclick=func1() name=line value=lc>multiple " + 
                      "data sets for multiple lines."
        opt.innerHTML=opt.innerHTML+"<br><input type=radio " + 
                      "önclick=func2() name=line value=lxy>pair " + 
                      "of data sets for each line. "        
    }
}

当用户选中第一个单选按钮时，将调用一个函数 func1()，该函数会将图表的类型设置为“lc”，或者在选择第二个单选按钮的情况下，将设置为“lxy”。

function func1()
{ type="lc" }

function func2()
{ type="lxy" }

像这样，您可以实现所有想要动态生成的属性；确保全局定义将由其他函数使用的变量。CreatChart() 在按钮的 onclick() 事件上执行。来自 HTML 中创建的文本框的值被放入变量 color、size 和 data 中。请注意，全局定义的 title 变量包含来自文本框的值，该文本框是根据用户选择列表的第一个元素动态生成的。然后将这些变量传递给图像的源。

function CreatChart()
{
    var color=ccolor.value
    var size=csizew.value+"x"+csizeh.value
    var data=cdata.value

    var list=document.getElementById('list')
    if(list[1].selected)
    {
        title=ctitle.value
        chart.src="http://chart.apis.google.com/chart?cht="+type+
                  "&chtt="+title+"&chco="+color+
                  "&chd=t:"+data+"&chs="+size+"";
    }
}

感谢和歉意

我要感谢 Akber Zaidi 先生，他在完成这项任务中给予了我很大的帮助和鼓励。我也要道歉，因为我知道我的代码中会有很多错误，但我是一个 JavaScript 初学者，说实话，这是我的第一个 JavaScript 代码，所以我没有专业地编写它。而且，我还没有实现 Google Chart API 的所有功能。但是，我已经投入了所有精力和精力来实现我的目标。