\n \n \n \n facescale_app\n\n\n\n

グラフ表示

\n \n \n \n \n \n\n
\n \n \n \n\n\n```\n\n```test.js\n\nlet sample1=[3,6,8,7,6,90,80];\n let sample2=[7,5,3,9,2.8];\nlet sample=[24,72,51,90];\n\nconst button = document.getElementById('button');\n\nvar options = {\n chart: {\n height: 350,\n width: 700,\n type: 'line',\n zoom: {\n enabled: false\n }\n },\n stroke: {\n curve: 'straight',\n // dashArray: 5,\n width: 5\n },\n markers: {\n size: 8,\n colors: [\"#ffffff\"],\n strokeColor: \"#008FFB\",\n strokeWidth: 3\n },\n series: [{\n name: 'スコア',\n data: sample\n }],\n grid: {\n row: {\n colors: ['#f3f3f3', 'transparent'], \n opacity: 0.5\n },\n },\n xaxis: {\n type: sample,\n categories: sample,\n tickAmount: 1\n },\n yaxis: {\n min: 0,\n max: 100\n },\n fill: {\n type: 'gradient',\n gradient : {\n shade: 'dark',\n gradientToColors: ['#F9A3A4'],\n shadeIntensity: 1,\n type: 'vertical',\n opacityFrom: 1,\n opacityTo: 1,\n stops: [0, 100]\n }\n }\n}\n\nvar chart = new ApexCharts(document.querySelector(\"#chart\"), options);\nchart.render();\n\nbutton.addEventListener(\"click\", () => {\n \n // グラフ更新\n console.log(options.xaxis.categories);\n \n options.xaxis.categories=test1;\n options.xaxis.type=test1;\n options.series[0].data = test2;\n \n\n chart.update();\n console.log(options.xaxis.categories);\n console.log(options.series[0].data);\n console.log(options.xaxis.type);\n});\n```\n\n### 試したこと\n\nhttps://suke.io/entry/20180801/\n上記のサイトによると、グラフを再描画するにはオブジェクトに再代入するとあったので、\n options.xaxis.categories=test1;\n options.xaxis.type=test1;\n options.series[0].data = test2;\nのように再代入しましたが、\noptions.xaxis.categories=test1;\n options.xaxis.type=test1;の部分が反映されません。\n\n公式サイトhttps://apexcharts.com/docs/methods/では\nchart.render();で再描画されるとありましたがクリックイベントの中にchart.render();を書くとグラフの数が増えたり減ったりして思った鳥の挙動にならないため、\n試しにchart.jsのchart.update();メソッドを書いたところなぜか一部だけ(縦軸の変数)更新されました。\n\n### 補足情報(FW/ツールのバージョンなど)\n\nvscode,xampp","answerCount":1,"upvoteCount":0,"datePublished":"2024-04-17T07:15:46.498Z","dateModified":"2024-04-19T03:55:05.959Z","acceptedAnswer":{"@type":"Answer","text":"Lhankor_Mhy様のコメント通りにすると解決しました。\n\nchart.updateOptions({\n\nxaxis: {\ncategories:test1\n}\n})\n\n\n\n\nchart.updateSeries([\n{\nname: 'sales',\ndata: test2\n},\n])\nを試したところ問題が解決しました!","dateModified":"2024-04-18T10:25:23.000Z","datePublished":"2024-04-18T01:25:23.116Z","upvoteCount":1,"url":"https://teratail.com/questions/7d9vrgfv5fu7gg#reply-dli16uie36zfj0"},"suggestedAnswer":[],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/Apex","name":"Apexに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/7d9vrgfv5fu7gg","name":"apexcharts.js グラフの更新がうまくいかない"}}]}}}
質問するログイン新規登録

Q&A

解決済

1回答

1345閲覧

apexcharts.js グラフの更新がうまくいかない

yukki-1227

総合スコア53

Apex

Apexは、Salesforce上で動作するアプリケーション作成をサポートするアプリケーション開発プラットフォーム。プログラミング言語であるApexコードと、独自のApex WebサービスAPIなどで構成されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2024/04/17 07:15

編集2024/04/19 03:55

0

2

実現したいこと

ボタンをクリックしたらグラフを再描画させたいです。

前提

apexcharts.jsを使ってグラフを作っています。
ReactやVue.jsは使わずバニラjsで書いています。

ボタンをクリックしたら、グラフの縦の数字も横のラベルも変えたいのですが、
ボタンをクリックすると縦の数字は変わりますが、横のラベルが変わりません。

再描画のためにクリックイベントにて、オブジェクトへの再代入を行っていますが、 options.series[0].data = test2;は反映されていますが
下記の二つが反映されていないようです。
options.xaxis.categories=test1;
options.xaxis.type=test1;

エラーはありません。分からなくて困っているので助けてください。

ボタンクリック前

イメージ説明

ボタンクリック後(横のラベルが24....51から変化していない)

イメージ説明

該当のソースコード

test.php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 8 <script 9 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js" 10 integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg==" 11 crossorigin="anonymous"></script> 12 <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script> 13 <script src="https://unpkg.com/apexcharts/dist/apexcharts.min.js"></script> 14 <title>facescale_app</title> 15</head> 16<body> 17 18 <p>グラフ表示</p> 19 20 <!-- ボタン --> 21 <button id="button">ボタン</button> 22 23 <!-- グラフ描画 --> 24 25 <div id="chart"></div> 26 27 <script src="test.js"></script> 28 29</body> 30</html>

test.js

1 2let sample1=[3,6,8,7,6,90,80]; 3 let sample2=[7,5,3,9,2.8]; 4let sample=[24,72,51,90]; 5 6const button = document.getElementById('button'); 7 8var options = { 9 chart: { 10 height: 350, 11 width: 700, 12 type: 'line', 13 zoom: { 14 enabled: false 15 } 16 }, 17 stroke: { 18 curve: 'straight', 19 // dashArray: 5, 20 width: 5 21 }, 22 markers: { 23 size: 8, 24 colors: ["#ffffff"], 25 strokeColor: "#008FFB", 26 strokeWidth: 3 27 }, 28 series: [{ 29 name: 'スコア', 30 data: sample 31 }], 32 grid: { 33 row: { 34 colors: ['#f3f3f3', 'transparent'], 35 opacity: 0.5 36 }, 37 }, 38 xaxis: { 39 type: sample, 40 categories: sample, 41 tickAmount: 1 42 }, 43 yaxis: { 44 min: 0, 45 max: 100 46 }, 47 fill: { 48 type: 'gradient', 49 gradient : { 50 shade: 'dark', 51 gradientToColors: ['#F9A3A4'], 52 shadeIntensity: 1, 53 type: 'vertical', 54 opacityFrom: 1, 55 opacityTo: 1, 56 stops: [0, 100] 57 } 58 } 59} 60 61var chart = new ApexCharts(document.querySelector("#chart"), options); 62chart.render(); 63 64button.addEventListener("click", () => { 65 66 // グラフ更新 67 console.log(options.xaxis.categories); 68 69 options.xaxis.categories=test1; 70 options.xaxis.type=test1; 71 options.series[0].data = test2; 72 73 74 chart.update(); 75 console.log(options.xaxis.categories); 76 console.log(options.series[0].data); 77 console.log(options.xaxis.type); 78});

試したこと

https://suke.io/entry/20180801/
上記のサイトによると、グラフを再描画するにはオブジェクトに再代入するとあったので、
options.xaxis.categories=test1;
options.xaxis.type=test1;
options.series[0].data = test2;
のように再代入しましたが、
options.xaxis.categories=test1;
options.xaxis.type=test1;の部分が反映されません。

公式サイトhttps://apexcharts.com/docs/methods/では
chart.render();で再描画されるとありましたがクリックイベントの中にchart.render();を書くとグラフの数が増えたり減ったりして思った鳥の挙動にならないため、
試しにchart.jsのchart.update();メソッドを書いたところなぜか一部だけ(縦軸の変数)更新されました。

補足情報(FW/ツールのバージョンなど)

vscode,xampp

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2024/04/17 08:03

ご提示のページには、 >>> そこでcomponentDidUpdate内でApexChartsのインスタンスが保持しているデータセットを更新して再描画する。 アップデートに使えるメソッドは以下の通り updateOptions (newOptions, redrawPaths, animate) updateSeries (newSeries, animate) どちらも第一引数で受け取ったプロパティで既存のデータセットをオーバーライドする。 <<< と書いてありました。『オブジェクトに再代入する』とは書いてなさそうです。
Lhankor_Mhy

2024/04/17 08:24

> chart.render();で再描画されるとありました 見つけることができませんでした。当該部分がどこか教えていただけますか?
yukki-1227

2024/04/17 12:27

コメントありがとうございます。chart.updateOptions({ xaxis: { categories:test1 } }) chart.updateSeries([ { name: 'sales', data: test2 }, ]) を試したところ問題が解決しました! ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか?
yukki-1227

2024/04/17 12:30

>> chart.render();で再描画されるとありました >見つけることができませんでした。当該部分がどこか教えていただけますか? The render() method is responsible for drawing the chart on the page. It is the primary method that has to be called after configuring the options. 日本語訳: render() メソッドは、ページ上にグラフを描画します。これは、オプションを構成した後に呼び出す必要がある主要なメソッドです。 再描画とは書かれてませんでした。すみません。
guest

回答1

0

自己解決

Lhankor_Mhy様のコメント通りにすると解決しました。

chart.updateOptions({

xaxis: {
categories:test1
}
})

chart.updateSeries([
{
name: 'sales',
data: test2
},
])
を試したところ問題が解決しました!

投稿2024/04/18 01:25

yukki-1227

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問