FusionCharts如何实现2D柱状图和折线图的组合图

发布时间：2023-05-17 15:18:02

FusionCharts是一种数据可视化工具，可用于生成各种类型的图表和图形。其中，组合图是将两种或多种图表类型组合到同一图表中，以使比较和分析数据更加简便。2D柱状图和折线图的组合图是一种比较常见的组合图形式，本文将介绍如何使用FusionCharts实现它。

1. 准备工作

在使用FusionCharts之前，需要先准备好以下文件：

- FusionCharts.js：这是FusionCharts的核心文件。

- FusionCharts.HC.js：这是为Highcharts图表库提供支持的文件，可用于生成2D柱状图和折线图的组合图。

- FusionCharts.HC.Charts.js：这是更高级的Highcharts图表库支持文件，可用于生成各种类型的图表，例如双Y轴图、堆积图等。

可以从FusionCharts官网下载这些文件。

2. 创建HTML页面

创建一个HTML页面，包括FusionCharts核心文件和图表库支持文件的引用。在HTML页面中添加一个DIV元素，用于显示生成的图表。

<!DOCTYPE html>
<html>
  <head>
    <title>FusionCharts Tutorial - Column Line Chart</title>
    <script type="text/javascript" src="FusionCharts.js"></script>
    <script type="text/javascript" src="FusionCharts.HC.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">
      // FusionCharts代码将在此处添加
    </script>
  </body>
</html>

3. 配置图表数据

要生成组合图，需要提供2D柱状图和折线图的数据。以下是一个简单的数据示例，其中包含两个系列的数据，分别对应柱状图和折线图。

var chartData = {
  "chart": {
    "caption": "Monthly sales",
    "subCaption": "Last year vs this year",
    "xAxisName": "Month",
    "yAxisName": "Sales",
    "theme": "fusion"
  },
  "categories": [
    { "category": [
      { "label": "Jan" },
      { "label": "Feb" },
      { "label": "Mar" },
      { "label": "Apr" },
      { "label": "May" },
      { "label": "Jun" },
      { "label": "Jul" },
      { "label": "Aug" },
      { "label": "Sep" },
      { "label": "Oct" },
      { "label": "Nov" },
      { "label": "Dec" }
    ]}
  ],
  "dataset": [
    {
      "seriesname": "Last year",
      "data": [
        { "value": "10000" },
        { "value": "12000" },
        { "value": "13000" },
        { "value": "14000" },
        { "value": "15000" },
        { "value": "16000" },
        { "value": "17000" },
        { "value": "18000" },
        { "value": "19000" },
        { "value": "20000" },
        { "value": "21000" },
        { "value": "22000" }
      ]
    },
    {
      "seriesname": "This year",
      "renderAs": "line",
      "data": [
        { "value": "15000" },
        { "value": "17000" },
        { "value": "19000" },
        { "value": "21000" },
        { "value": "23000" },
        { "value": "25000" },
        { "value": "27000" },
        { "value": "29000" },
        { "value": "31000" },
        { "value": "33000" },
        { "value": "35000" },
        { "value": "37000" }
      ]
    }
  ]
};

在上述示例中，"dataset"数组包含两个元素，分别对应柱状图和折线图的数据，其中"renderAs"属性指定第二个数据系列应该以折线图而不是柱状图渲染。

4. 配置图表样式

可以通过在"chart"对象中指定各种样式属性来配置图表的外观和行为，例如调整轴的标签样式、设置图表的背景颜色等。

var chartData = {
  "chart": {
    "caption": "Monthly sales",
    "subCaption": "Last year vs this year",
    "xAxisName": "Month",
    "yAxisName": "Sales",
    "theme": "fusion",
    "xAxisNameFont": "Arial",
    "xAxisNameFontSize": "14",
    "xAxisNameFontColor": "#666666",
    "yAxisNameFont": "Arial",
    "yAxisNameFontSize": "14",
    "yAxisNameFontColor": "#666666",
    "bgColor": "#ffffff",
    "showBorder": "0"
  },
  // 省略部分代码
};

在上述示例中，我们设置x轴和y轴标签的字体、大小和颜色，将图表的背景颜色设置为白色，并禁用了图表的边框。

5. 渲染图表

使用FusionCharts库提供的"ColumnLine"类创建一个FusionCharts对象，然后使用"setChartData()"方法将数据传递给该对象，最后在HTML页面上的DIV元素中显示生成的图表。

var columnLineChart = new FusionCharts({
  type: 'ColumnLine',
  renderAt: 'chart',
  width: '600',
  height: '400',
  dataFormat: 'json',
  dataSource: chartData
});
columnLineChart.render();

在上述示例中，我们创建了一个名为"columnLineChart"的FusionCharts对象，类型为"ColumnLine"，宽度为600像素，高度为400像素，数据源为上文中准备好的"chartData"对象，然后调用"render()"方法，在HTML页面上的DIV元素中渲染图表。

6. 总结

使用FusionCharts实现2D柱状图和折线图的组合图需要完成以下步骤：

1. 准备好FusionCharts的核心文件和图表库支持文件。

2. 创建一个HTML页面，包括图表文件的引用和显示图表的DIV元素。

3. 提供2D柱状图和折线图的数据，并指定第二个数据系列以折线图渲染。

4. 配置图表样式以控制外观和行为。

5. 使用FusionCharts库提供的"ColumnLine"类创建FusionCharts对象，并传递数据源。

6. 调用"render()"方法，在HTML页面上的DIV元素中渲染图表。

通过以上步骤，可以快速有效地生成2D柱状图和折线图的组合图。