type: 'bar', }, labels: ["20-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-"], type: 'bar', レスポンシブ表示に対応したグラフを簡単に作ることができるWordPressプラグイン, 【超簡単】Adobe illustratorで画像を綺麗に書き出す方法【イラストレーター】, 【Cocoon】WordPressでサイトタイトルを非表示にする方法【CSSのみ】, 【CSS】超簡単!スクロールしても背景画像が固定されたままにする方法【プログラミング】, 【テーマ別】WordPressのアイキャッチ画像とは?オススメのサイズはこれ!【ブログ】, 【超簡単!】WordPressにTwitterのタイムラインを組み込む方法【プラグイン不要】. datasets:[{ } 完成品の見た目は以下の通りです。 var ctx = document.getElementById('myChart1').getContext('2d'); backgroundColor: "rgba(54,162,235,0.8)", data: { lineTension: 0, }); 折れ線グラフだけでなく、棒グラフも載せることができます。, var ctx = document.getElementById('myChart2').getContext('2d'); 社内ツールなので無料のテーマ『Cocoon』を選択しました。 options: { fill: false, label: "女", // 系列名B data: { data : { label: "男", // 系列名A backgroundColor: "rgba(50,255,50,0.8)", }, data: [100, 200, 400, 1000, 2000, 5500], }] { var myChart2 = new Chart(ctx, { backgroundColor: "rgba(50,255,50,0.8)", © 2020 ぴょんなことから All rights reserved. datasets:[{ そういうことなら、WordPressプラグイン「Visualizer」を使うといいよ!, おはこんばんにちは!ノボルです。ブログを運営していると、「ここにちょっとグラフを入れたい」って思うことはありませんか?ブログ記事がテキストだけだと、読みづらかったり伝わりにくいですよね。そこで今回は、WordPressプラグイン「Visualizer」を使ってグラフを作成する方法を紹介します!, 「Visualizer」とは、レスポンシブ表示に対応したグラフを簡単に作ることができるWordPressプラグインです。下図を見てもらえば分かりますが、無料枠だと、① 表② 円グラフ③ 線グラフ④ 面グラフ⑤ 地理グラフ⑥ 横棒グラフ⑦ 縦棒グラフ⑧ バブルグラフ⑨ 散布図グラフを作成することができます。, まずは、WordPress管理画面のダッシュボードから、[プラグイン]→[新規追加]にアクセスしてください。, 右上にある検索窓から、「Visualizer」と検索すると、左上に水色のアイコンのプラグインが表示されるので、[今すぐインストール]をクリックしましょう。, WordPress管理画面のダッシュボードから、[Visualizer]→[Add New Chart]をクリックします。, 様々なグラフが表示されるので、お好みのものを選択して[Next]をクリックしましょう。ここでは例として、線グラフを作成します。, CSVのデータを、Excel・Numbers・メモ帳などのアプリに貼り付けます。あとは、データを編集して、[CSVファイル]として保存します。※ 他のデータ形式で保存するとエラーが発生する場合があるので、必ずCSVファイルとして保存してください。※ CSVファイルについて学びたい人は、「CSVファイルとは?詳しく解説、サンプルデータもあります」という記事が分かりやすいです。, 先ほどの画面で、[ファイル選択]から保存したCSVファイルを選択し、[Import]で取り込みます。, [Chart Title]にグラフ名を入力して、[Save Chart]をクリックしたら完了です。, 記事編集画面で、[ブロックの追加]→[Visualizer Chart]を選択します。, WordPressプラグインを使いたくないという人は、・Word・Pages・Google Documentなどのアプリケーションでグラフを作って、画像ファイルとしてブログに貼り付けるのもアリです。, 今回の記事では、WordPressブログで簡単にグラフを作成する方法について解説しました。グラフを貼り付けることでブログ記事は伝わりやすくなります。ぜひ、WordPressプラグイン「Visualizer」を活用してみてください!最後まで読んでいただき、ありがとうございました(o^^o), 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, マレーシアのクアラルンプール在住の21歳大学生。高校卒業→フィリピンのバギオに3ヶ月語学留学→マレーシアに留学中。専攻は文系ですが、プログラマーを目指してRailsとJavascriptを学習しています。, 【超簡単】WordPress で記事が「保存中」のまま動かない時の対処法【ブログ】, この記事では、WordPressの記事編集画面で「保存中」のまま動かない時の対処法について解説しています。ブログを始められたばかりの方はわからないことが多いと思いますが、大抵の問題の解決方法はググれば見つかるので安心してください!, 【最強無料テーマ】ブログ初心者に「Cocoon」をオススメする理由【WordPress】, この記事では、ブログ初心者に「Cocoon」をオススメする理由について解説しています。「Cocoon」は、JinやSANGOなどの有料テーマにも引けを取らない、高機能な無料テーマです。「無料だけど高機能なテーマを使いたい!」という人には、ぜひオススメします!, 【CSS】WordPressの全画像に一発で枠線(ボーダー)をつける方法【ブログ】, この記事では、WordPressの全画像に一発で枠線(ボーダー)をつける方法をご紹介しています。画像一つ一つに枠線(ボーダー)をつけるのは骨が折れますが、今回紹介する方法を使えば、手軽に全記事の画像に枠線をつけることができます。, この記事では、Adobe illustratorで図形を細かく移動させる方法について解説しています。, この記事では、『クリック率が上がるタイトル15選』を紹介しています。ブログのアクセスを増やす方法の一つとして、「魅力的なタイトルをつけること」が挙げられます。ユーザーは、ブログタイトルを見て、その記事を読むか読まないか決めるので、魅力的なタイトルをつけるように心がけましょう!, この記事では、Adobe illustratorで破線・点線を作る方法について画像付きで解説しています!, この記事では、「ブログ運営者の9割が挫折する現実」「僕がブログを1年続けてこられた3つの理由」について解説しています。ブログを継続するのは大変ですが、一緒に頑張っていきましょう!, この記事では、ブログで読みやすい文章を書くための『3つのコツ』について解説しています。Webライティングのコツはたくさんありますが、この記事で紹介する3つのコツを実践することで、わかりやすい文章を書くことができます。, この記事では、WordPressプラグイン「Crayon Syntax Highlighter」で、HTMLの文字化けコードをに対処する方法について解説しています。プラグインの設定を変えるだけで、簡単に文字化けを解消することができます。, 【ブログ初心者必見】土日にアクセス数が減少する理由はこれ!【ブログ運営】【Google Analytics】, 【ブログ初心者向け】結局、記事のURLは日本語と英語どっちがいいの?【SEO対策】, 【Mac】簡単すぎる!PDFファイルを分割する2つの方法【プレビュー機能・Adobe Acrobat】, 【結論】バナーvsテキスト、クリックされやすいのはどっち?【アフィリエイトブログ】, 【重要】WordPressのバージョンを更新すべき3つの理由と注意点【ブログ運営】. グラフを表示する方法は主に以下の4つです。 真っ先に思いつくのはExcelやGoogleで作成したグラフを画像化して画像ファイルとして挿入する方法です。 別にこれでも問題ありませんし、処理も軽い(画像サイズにもよりますが)です。 画像として貼り付けるデメリットは、完全に静的な画像となる点です。 せっかくのグラフですので多少なりとも動きがある方が見ている方も楽しめると思いませんか? ということで、今回は画像として挿入する方法は使わないことにして、他の方法を比較します。 type: 'bar', backgroundColor: "skyblue" // 系列Aの棒の色 scales: { 得意な分野はAccessによる短納期開発、 lineTension: 0, グラフを簡単に作れるワードプレスのプラグイン. }] , そこで今回グラフを記事内に表示しようとして、ふと、「グラフを表示するベストな方法は何だろう?」と考えました。, 真っ先に思いつくのはExcelやGoogleで作成したグラフを画像化して画像ファイルとして挿入する方法です。, せっかくのグラフですので多少なりとも動きがある方が見ている方も楽しめると思いませんか?, ということで、今回は画像として挿入する方法は使わないことにして、他の方法を比較します。, 様々なプラグインが紹介されていましたが、私が目をつけたプラグインは以下の2つです。, 選んだ基準は①レスポンシブ対応であること、②有効インストール数も多く③最新更新が比較的に最近であることなどです。, 「プラグインのバージョンを1つ前に戻せば文字化けはなおる」という記事も見かけましたがバージョンによって不安定ということに変わりないですね。, データを貼り付けるだけなので操作性も良いですし、グラフのビジュアルもなかなかいい感じです。, フォーカスを当てた時にデータポイントの値が表示され、折れ線の色が強調色に代わるのですが、ちょっと不可解なことに女性を選んでも男性のグラフも合わせて強調されています。, Statpediaは海外のWebサービスで日本語対応はされていませんが、グラフのラベル・タイトル・軸に日本語を使うことも可能です。, 作成したグラフはPNG, PDF, SVGなど 多数のファイル形式でダウンロードできますのでホームページへの埋め込みのみではなく、プレゼン資料の作成などにも重宝しそうです。, 最後にChart.jsを利用してコードを記述しwordpressに埋め込む方法があります。, テーマのfunction.phpでChart.jsを読み込むことで、どのページにもチャートを埋め込むことができますが、特定のページだけチャートを利用する場合は、利用するページ内で読み込むことをおすすめします。, WordPressのダッシュボードから、外観→テーマの編集をクリックし、function.phpを編集します。. borderColor: "rgba(50,205,50,0.8)", プラグインは【Password Protected】です。 data: [100, 200, 400, 1000, 2000, 5500], borderColor: "rgba(54,162,255, 1)", labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], label: 'PV', ワードプレスで簡単にグラフが作れるプラグインが 「WordPress Charts and Graphs Lite」 です。 まず最初にグラフ化したいデータをCSVファイルとして保存しておきます。(データの手動入力はできないため) datasets: [ yAxes: [{ } 『Coco …, 社内限定のwikipedia(ウィキペディア)や社内通達など、Internet上には公開せずにサイトを構築する手段としてwordpressを …, 今回はサイト全体に簡単にパスワードを設定するプラグインをご紹介します。 fill: false, インストールはプラグイン新規追加から行えます。 インストールして有効化すると、アドミンバーの「メディア」にVisualizerという項目ができます。 グラフ作成はこの「Visualizer Library」より行います。 }] { // ┐ この記事では、WordPressブログで簡単にグラフを作成する方法について解説しています。グラフを貼り付けることでブログ記事は伝わりやすくなります。ぜひ、WordPressプラグイン「Visualizer」を活用してみてください! }); Chart.jsも思ったより手間はかかりませんが、気軽に表示したいなら私的にはStatpediaがおすすめかな。と思います。, Amazonビジネスなら、請求書払い・見積書発行など法人に特化したサービスが受けられます。, プログラマーと社内SEとしての経験を活かして、 WordPressでグラフを表示させる方法について解説します。Chart.jsを使うことで、プラグインなしで折れ線、棒グラフ、円グラフなどなど、様々なグラフを作ることが可能です。 } var ctx = document.getElementById("myChart1"); data: [279,393,461,617,569,630, 677,669,508,393, 353], // 系列Aのデータ ] ticks: { label: '収益', backgroundColor: "pink" // 系列Bの棒の色 WordPressのプラグイン「WordPress Charts and Graphs Lite」を使用して簡単にグラフを作成する方法を紹介します。 labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], data: [100, 200, 400, 1000, 2000, 5500], data: [0, 300, 650, 680, 800, 1100], ]} type: 'bar', 情報システム部門のご相談を承ります。 borderColor: "rgba(30,255,30,1)",  …. backgroundColor: "rgba(50,255,50,0.8)", labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'], borderColor: "rgba(30,255,30,1)", { data: { datasets:[{ }, } 現在はCMSを利用したホームページの作成にも力を入れています。, 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js', "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js", 現在社内のQAサイトをwordpressで構築中です。