Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでビジュアライザーを使って棒グラフを作成する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressサイトにバーやチャートを追加したいですか?

グラフ、棒グラフ、円グラフのような視覚的補助を加えることで、ユーザーにとって魅力的で理解しやすい方法でデータを提示することができます。

この投稿では、WordPressでVisualizerを使って棒グラフやチャートを簡単に作成する方法を紹介します。

Adding Charts and Graphs in WordPress

WordPressにおけるバーとチャートの問題点

コンテンツに棒グラフやチャート、グラフを追加するプラグインはたくさんあります。しかし、私たちがユーザーから聞いた最も一般的な不満は、これらのプラグインは通常、使い方が複雑すぎるということです。

これらのプラグインの中には、ユーザーが非常に複雑なフォーマットでショートコード内にデータを追加することを期待するものさえある。

そのようなプラグインを使う代わりに、多くのユーザーはオフィスアプリケーションでチャートを作成し、WordPressサイト用の画像に変換している。

一度も変更しないつもりなら、これは有効かもしれない。しかし、ユーザーが特定の部分をクリックすると役立つデータが表示されるようなインタラクティブなチャートには、画像はかないません。

理想的なチャートとグラフのソリューションは、以下を可能にする:

  • コンピューターやウェブ上のデータソースからデータを追加します。
  • データを使ってチャート、パイ、グラフ、バーを作成します。
  • 美しく、インタラクティブで、カラフルで、モバイルフレンドリーなグラフを作成できます。
  • 最も重要なのは、いつでも好きなときにデータを更新できることだ。

ビジュアライザーでチャートを追加すれば、ユーザーのエンゲージメントを高め、データを理解しやすくすることもできます。

それでは、WordPressサイトに棒グラフを簡単に追加する方法を見てみよう。

WordPressでビジュアライザーを使って棒グラフを作成する方法

Visualizerプラグインを使用すると、WordPress で棒グラフやチャートを簡単に作成できます。これは、あなたのサイトにインタラクティブなデータビジュアライゼーションを作成できる、市場で最高のWordPressデータビジュアライゼーションプラグインです。

棒グラフやチャートを作成するための無料プランもある。

まず、Visualizerをインストールして有効化する必要があります:Tables and Charts Manager for WordPressプラグインをインストールし、有効化する必要があります。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドを参照してください。

注:このチュートリアルでは、プラグインの無料版を使用します。プロフェッショナルな機能のロックを解除したい場合は、有料プランを購入してください。

有効化した後、WordPress ダッシュボードからVisualizer ” Add New Chartページにアクセスする必要があります。

そこで、表、円グラフ、折れ線グラフ、棒グラフなど、作成したいグラフのタイプを選択する。そして「次へ」ボタンをクリックする。

Choose a chart type in the Visualizer plugin

次のステップに進みますので、「ファイルを選択」ボタンをクリックして、コンピューターからエクセルのスプレッドシートデータをインポートしてください。

ExcelやGoogleスプレッドシートをCSVファイルとして保存している場合は、「Import data from URL」タブを展開してインポートすることができます。

そうしたら、「CSVからインポート」ボタンをクリックします。次に、CSVファイルのURLを入力して、ファイルを埋め込みます。

Add CSV file URL

CSVファイルは、1行目にカラム名、2行目にデータ型が必要です。プラグインは以下のデータ型をサポートしています:文字列、数値、ブーリアン、日付、時刻、時刻。

Google Sheetsで作成したファイルの例をご覧ください。

Pie chart data example

テキストエディターを使ってCSVファイルを作成する場合は、このCSVファイルの例を見てください:

日々の活動,時間
文字列,数字
仕事,8
睡眠,7
食事,3
テレビを見る,2
通勤,1

しかし、Googleドライブにチャートデータをスプレッドシートとして保存している場合は、エクスポートせずにチャートに追加することができます。

まず、Googleスプレッドシートでデータファイルを開き、ファイル ” 共有 ” ウェブに公開する のリンクをクリックします。

Click Publish to web option

ポップアップが表示され、このドキュメントの公開方法を選択する必要があります。

ドロップダウンメニューからカンマ区切り値(.csv)オプションを選択し、「公開する」ボタンをクリックするだけです。

Choose the CSV option from the dropdown menu

シートの公開 URL が CSV ファイルとして表示されます。この URL をコピーして、ビジュアライザー・チャートに戻ってください。

このURLを「CSVからインポート」フィールドに追加する必要があります。

Copy the URL to add it to the Visualizer

URLを入力すると、プラグインがCSVファイルを取得し、チャートのライブプレビューを表示します。

これで、上部から「設定」タブに切り替えて、フォントスタイル、数字フォーマット、サイズと配置、サイズ設定など、一般的な設定を行うことができる。

完了したら、プロンプトの下部にある「作成」ボタンをクリックします。

Customize the pie chart

WordPressの投稿/ページに図表を追加する

WordPressの投稿やページに図表を追加するのは、画像を追加するのと同じくらい簡単です。

まず、円グラフを追加したい新規または古いページ/投稿を開きます。画面左上の「ブロックを追加」(+)ボタンをクリックします。

ブロック・メニューが開きますので、ビジュアライザー・チャート・ブロックを見つけて追加してください。

そうしたら、ブロック自体にある’Display an Existing Chart’ボタンをクリックする。

Click Display an existing chart button

これでブロック内に新しいプロンプトが表示され、先ほど作成した円グラフを選択する必要があります。

最後に、「公開する」または「更新する」ボタンをクリックして、設定を保存します。

これで、WordPressサイトにアクセスして、円グラフを実際に表示することができる。

Pie chart preview

WordPressでビジュアライザー・チャートを編集する

チャートはいつでも編集・変更できます。WordPress ダッシュボードからVisualizer ” Chart Libraryページにアクセスするだけです。

そこから、チャート名の下にあるアイコンを使って、チャートのクローン、削除、ビジュアル設定の編集ができます。

Edit chart

チャートを変更することなく、既存のチャートのデータを更新することも、ビジュアライザーを使えば非常に簡単です。

Googleスプレッドシートからデータを追加した場合は、スプレッドシートのデータを更新し、ファイル ” 共有 ” ウェブに公開するオプションに移動し、スプレッドシートを再公開するだけです。

変更内容は自動的にチャートに反映されます。

一方、CSVファイルをアップロードした場合は、コンピューター上でCSVファイルを更新する必要があります。更新したいチャートを選択し、チャートの下にある編集リンクをクリックしてください。

CSVファイルのインポート」セクションで、新規CSVファイルをアップロードしてください。データの変更は、そのグラフを挿入した投稿やページに自動的に反映されます。

ボーナス:WordPressで会社の組織図を作成する

中小企業のサイトであれば、WordPressで会社の組織図を追加することもできます。このチャートは、CEOから各チーム、各チーム内の従業員に至るまで、あなたの会社がどのように構成されているかを示します。

組織図は、潜在顧客があなたのビジネスについてさらに詳しく知るのに役立ち、チーム間のコミュニケーションを容易にします。

An org chart, created using WordPress

チャートを作成するには、Organization Chartプラグインをインストールして有効化するだけです。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

有効化したら、Wpdevart Chart ” Chartsページにアクセスし、’Add New’ ボタンをクリックします。チャートの名前を追加する新しい画面が表示されます。

その後、画面上の要素にあなたの会社のCEOの画像とタイトルを追加します。その後、矢印アイコンをクリックしてください。

Start building an organizational chart

これにより、CEOの後に続く人物の肩書きと画像を追加できる別の要素が追加されます。次に、要素をもう一度クリックすると、異なる方向の複数の矢印アイコンが表示されます。

こうすることで、複数の支社やチームを持つ会社組織を作ることができる。

Customizing a company employee chart

設定が完了したら、「保存」ボタンをクリックして設定を保存します。

組織図を追加したいページを開き、「WpDevArt組織図」ブロックを追加します。次に、ブロック内のドロップダウンメニューから作成したチャートを選択します。

最後に、「公開する」または「更新する」ボタンをクリックして、設定を保存します。詳しくは、WordPressで組織図を作成する方法のチュートリアルをご覧ください。

Adding a block to a WordPress website

この投稿がWordPressサイトに棒グラフを追加するのにお役に立てば幸いです。WordPress サイトの色をカスタマイズする方法についての初心者向けガイドや、エキスパートが選ぶビジネスサイトに必須の WordPress プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

22件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Adam says

    I am able to generate the chart and publish it on my site, but how to I edit the height and width once the shortcode?

  3. Judith Hollies says

    Thank you so much for this clear tutorial. I’m trying to create a pie chart in wordpress and have successfully activated the visualizer plug-in. But when I copy the info over from either excel or google drive (following your steps) both times the first row of stats is omitted in the pie chart. I’ve tried re-ordering the stats, placing them in different locations, but it’s always the first row that gets omitted! Can you help me! Judith

  4. mandeep says

    How we comparison between two app like app A and app B and now for i want to make a graph chart both of them in blog of wordpress?How i do it?Can you tell me here?

  5. Felix says

    Thanks for the review. How do you handle values with a comma eg. 2.232,42 if you have to use commata as a seperator for the Visualizer?

  6. david says

    Hi Great plugin, I solved all my problems except one.
    How do you edit a chart in the visualizer library, when I click on the edit icon all I get is a blank screen, is this just me – plugin conflict or something, or is there a problem with the Visualizer plugin
    Any ideas?
    Thanks
    David

  7. david says

    Hi, I’m trying to replicate your example above from “Adding a Chart in WordPress using a CSV file”, but when I click “From Computer” in “Upload csv file” and select the file I copied from your example I get: “CSV file is broken or invalid. Please, try again”
    Any ideas what the problem may be, any help greatly appreciated.
    Thanks
    David

  8. Richard G says

    Hello

    Thank you for this post

    However maybe you can help me for one of my client. He has a group of students, each one have a private area

    My client wants to integrate somes customs fields. Basicly each student will enter his datas into this custom fields, and these datas will be convert into a chart or a curve (tracking weight loss or mass gain for exemple)

    Any idea?

    Thank you
    Richard

  9. Chad says

    Thanks for the great tutorial. When I drop down the “upload CSV file” I am unable to click on the button for “From Web”, as it is not highlighted in blue. So I must add the data “from Computer”. I noticed that in the screen shot above the “from Web” button is also not highlighted. Has anybody else had this problem and figured out a solution?
    Thanks Again

  10. Artur says

    Thanks a lot !!!!!!

    I love you guys, you solve my very long issue.
    Thanks for this excellent plugin.

    Recommended to all.

  11. Franco Castillo says

    I just downloaded the Visualizer plugin, and I opened it in Winrar. Can anyone tell me how to activate the plugin in Winrar?

  12. Richard says

    Hello

    Yes very interesting indeed thanks!

    I have the same question (and sorry for my english), i need to create personnal charts from datas feed by a user thrue a table on the website(and insert the final chart in the profil page of the user). Do you think it can be done? do you have any clues?

    Thanks

  13. Stephen says

    Great looking plugin. Have been waiting for something like this for ages. :)

    How feasible is it to be able to read data from custom fields, instead of a CSV file or a Google Drive spreadsheet?

    Is this a feature that you may consider implementing?

    That way, data could be kept in the WordPress database, and be updated from the front end of the website.

    For me, that would be really useful!

    – Stephen

  14. Jotpreet Singh says

    hey, Awesome. Can this be done via google docs or any other online method. I’m running a blog on wordpress.com. Hope something, would come out. Do you have any ?

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。