FusionChartsの使い方は何ですか。

2年 ago
優斗, 朝陽
1 minute

FusionChartsは、インタラクティブで視覚的なチャートを作成するためのJavaScriptチャートライブラリです。以下はFusionChartsを使用する基本的な手順です。

  1. FusionChartsライブラリファイルをインポートする：HTMLファイルにfusioncharts.jsなどのFusionChartsライブラリファイルをインポートします。
  2. HTMLファイル内に、グラフを表示するためのコンテナを作成します。これは、div要素や十分なスペースを持つ他の要素である必要があります。
  3. チャートのデータを設定する: JavaScriptオブジェクトやサーバーから取得したデータを使用して、チャートのデータを設定します。
  4. JavaScriptオブジェクトを使用して、チャートの属性を設定する。タイトル、軸、凡例などを設定する。
  5. FusionChartsのコンストラクタを使用してグラフオブジェクトを作成し、以前に作成したコンテナにバインドします。
  6. グラフをレンダリングする：グラフオブジェクトのrender()メソッドを使用して、グラフをコンテナにレンダリングします。

以下はサンプルコードです。

HTMLセクション:

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

JavaScriptセクション：

// 导入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();

これは、FusionChartsを使用して棒グラフを作成する基本的な例です。必要に応じて設定を調整し、他の種類のグラフを追加できます。

bannerAds