Pleasanter Tips:スクリプトを書きながらチャートを表示するサイト

はじめに

最近チャート表示するプログラムを作成していますが、いろいろ試す必要があり、前の情報を残しながら簡単にチャート表示できないかと思い作成してみました。
チャートはApache EChartsを使いました。

実行サンプル

サイトを作成する

手順1 テーブルの作成

新規作成からテーブルを作成してください。サンプルでは記録テーブルで作成しています。

手順2 項目の作成

エディタで項目設定します。

見出しの追加

その他から見出しを追加します。見出しは２つ使用します。一つ目は コンテンツ で二つ目は チャートです。表示名に決まりは有りませんが、順番は前記の通りにしてください。

説明の追加

説明を２つ追加します。一つ目はスクリプト記述用で、二つ目はグラフ表示エリア確保用です。

表示名の設定しました。

非表示にチェックを入れます。
説明Bの拡張HTMLを変更します。

フィールドの前に下記を記述します。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

フィールドの後に下記を記述します。

<div id="ChartArea" style="display:inline-flex"></div>

手順3 スタイルの追加

チャート部を右に表示する為のスタイルを記述します。

#SectionFields1Container,
#SectionFields2Container,
#SectionFields3Container {
    float: left;
    width: 50%;
}

手順4 スクリプトの追加

グラフ表示部のスクリプトを記述します。

$p.events.on_editor_load = function (args) {
  drawChart(args);
}
$p.events.after_set = function (args) {
  drawChart(args);
}
function drawChart(args) {
  $('#Results_DescriptionA')[0].value
  $p.getControl('DescriptionA')[0].id
  var src=$('#'+$p.getControl('DescriptionA')[0].id)[0].value;
  try {
    eval(src);
  } catch(e) {
    $p.setMessage('#Message', JSON.stringify({
      Css: 'alert-error',
      Text: e.message 
    }));
  }
}

コンテンツを作成する

実際のコンテンツを作成します。スクリプトに下記コードを入力します。タイトル他は適当に。

if( $('#ChartAreaInner')[0]===undefined ) {
  $('#ChartArea').append('<div id="ChartAreaInner" style="background-color:white;width:800px;height:400px;"></div>');
}
var myChart = echarts.init(document.getElementById('ChartAreaInner'));
var option = {
  title: {text: 'ECharts Getting Started Example'},
  tooltip: {},
  legend: {
    data: ['sales']
  },
  xAxis: {
    data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
  },
  yAxis: {},
  series: [
    {
      name: 'sales',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
myChart.setOption(option);

上部にあるifはChartArea内にChartAreaInnerを追加します。チャートエリアのサイズを変える必要があるのでここで追記するようにしました。
EChartsでが表示エリアを変えるコマンドもあるのでそちらを使用しても良いです。
作成または更新するとチャートが描画されます。

最後に

今回のデータは固定にしましたが、WebAPIを使用して他サイトからデータを取得する事も可能です。