How do you use FusionCharts?

2 years ago
Sophia Anderson
2 minutes

FusionCharts is a JavaScript charting library used for creating interactive and visual charts. The following are the basic steps for using FusionCharts:

  1. Import the FusionCharts library files: Include the FusionCharts library file, such as fusioncharts.js, in your HTML file.
  2. Create a container: Generate a container in the HTML file for displaying charts, which can be a div element or any other element with enough space.
  3. Set up chart data: Use JavaScript objects or data retrieved from the server to configure the data for the chart.
  4. Configure chart properties: Use JavaScript objects to set properties of the chart, such as title, axis, legend, etc.
  5. Create a chart object: Use the FusionCharts constructor function to create a chart object and bind it to the previously created container.
  6. Render chart: Use the render() method of the chart object to display the chart in the container.

The sample code is shown below:

HTML section:

<div id="chartContainer"></div>

JavaScript section:

// 导入FusionCharts库文件
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// 导入所需的图表模块和主题
charts(FusionCharts);
FusionTheme(FusionCharts);

// 配置图表数据和属性
const chartData = [
  { label: "January", value: "200" },
  { label: "February", value: "350" },
  { label: "March", value: "450" },
  { label: "April", value: "200" },
];

const chartConfig = {
  type: 'column2d',
  renderAt: 'chartContainer',
  width: '600',
  height: '400',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: "Monthly Sales",
      xAxisName: "Month",
      yAxisName: "Sales",
      theme: "fusion",
    },
    data: chartData,
  },
};

// 创建图表对象
const chart = new FusionCharts(chartConfig);

// 渲染图表
chart.render();

This is a basic example of creating a bar chart using FusionCharts. You can customize and add other types of charts according to your needs.

bannerAds