みなさんAlteryxのレポーティングツールを使っているでしょうか？その中でもインタラクティブチャートツールについてのTipsを紹介したいと思います。
インタラクティブチャートツールは、XMLというよりはHTMLの世界で書かれており、htmlpassthroughタグとCDATAタグで内部に組み込まれています。実態はPlotlyというオープンソースのJavaScriptライブラリで書かれています。そのため、HTML形式で出力したときのみインタラクティブに操作ができます。
インタラクティブチャートはどのように描画されているのですか？
インタラクティブチャートツールの結果をレンダリングツールでHTML形式で出力してみましょう。以下はテキストエディタで開いた結果です。
選択部分に「plotly」というJavaScriptのライブラリへのリンクを確認することができます。「plotly.min.21.0.18.js」というスクリプトですが、これは一体なんなのでしょうか？
これは、オープンソースのJavaScriptライブラリでJavaScriptでチャートを書く時の有名なライブラリです。このライブラリでかけるものがすべてかけるようにはなっていないようですが、基本的な描画仕様はこのライブラリの範囲外に出るのは難しいと思います。
オフライン環境だと表示できなくて困っています
このライブラリはオンラインでalteryxからダウンロードするようになっているため、HTMLに出力した際にオフライン環境だとグラフが描画されません。
これを回避するには、https://whitelist.alteryx.com/v1/downloads/v1/lib/plotly/plotly.min.21.0.18.js からライブラリをダウンロードし（ブラウザにこのリンクを貼り付けると自動的にダウンロードされます）、出力されているHTMLのパスを書き換えれば表示されるようになります。
例えば、以下のように書き換えてみます。jsファイルはHTMLファイルと同じところにおいておきましょう。
これでオフライン環境でも表示することが可能です。ローカルにある方が早いので、速度アップにもつながります。
まとめ
- インタラクティブチャートツールで使われているライブラリについて紹介しました
- インタラクティブチャートツールで作成したチャートがオフライン環境で表示されない問題の対処法をご紹介しました
コメント