質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
87.20%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

useStateで配列の中身を更新したいが、意図したように変更されない

ryo666-6
ryo666-6

総合スコア2

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

1クリップ

294閲覧

投稿2022/01/08 11:25

現在、勉強の成果を記録するアプリを実装中です。

react-chartjs-2(4.0.0)を用いて、折れ線グラフを導入しており、ユーザーが「今日の日付」と「今日やる予定だったTODOの個数」をinputタグで打ち込み、送信ボタンを押すことで、グラフの値を動的に変化させたいと考えています。

【聞きたいこと】
横並びでデータを追加したいのですが、下記画像のように、縦に日付が追加されてしまいます。(黒の枠で囲んである部分です。)
イメージ説明


本来は、このような処理を望んでいます。
イメージ説明

下記、コードになります。(変数の'date'と'data'が見分けにくいと思います。すみません。

↓LineChart.js

import React, { useState, useRef } from 'react' import { Button } from '@chakra-ui/react'; import { Line } from 'react-chartjs-2' import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from "chart.js"; ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend); const LineChart = () => { const [numData, setNumData] = useState(0) const [date, SetDate] = useState('') const calVal = useRef(null) const chooseDate = useRef(null) const onClick = () => { setNumData(calVal.current.value); calVal.current.value = ''; SetDate(chooseDate.current.value); SetDate([...date, chooseDate.current.value]) chooseDate.current.value = ''; } const data = { labels: [date], datasets: [ { label: 'どのくらい達成できたかな?', fill: true, lineTension: 0.1, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', borderCapStyle: 'round', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'square', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#eee', pointBorderWidth: 10, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 1, pointRadius: 1, pointHitRadius: 10, data: [3, 10, 7, 5, 8, 4, numData] } ] }; const clearDate = () => { console.log(data.labels) data.labels.splice(0); } const checkOfDelete = () => { let result = window.confirm('データをリセットします。よろしいですか?') if(result) { clearDate(); console.log('削除しました。'); } else { alert('削除できませんでした。') } } return ( <div mt='2'> <Line data={data}/> <input ref={chooseDate} type='text' label='曜日' placeholder='今日の曜日'/> <input ref={calVal} type='number' label='number' placeholder='何個達成できた?'/> <br/> {data.labels.length < 8 ? <Button onClick={onClick}>送信!</Button> : <p>曜日がいっぱいだよ。</p>} <Button onClick={checkOfDelete} ml="10">リセット</Button> </div> ) } export default LineChart

↓App.js

import React, { useRef } from 'react'; import { useTodo } from './hooks/useTodo'; import TodoTitle from './components/TodoTitle'; import TodoAdd from './components/TodoAdd'; import TodoList from './components/TodoList'; import Time from './components/Time'; import LineChart from './components/LineChart'; import { Container } from '@chakra-ui/react'; import { AddIcon } from '@chakra-ui/icons'; function App() { const { todoList, addTodoListItem, toggleTodoListItemStatus, deleteTodoListItem } = useTodo(); const inputEl = useRef(null); const handleAddTodoListItem = () => { if (inputEl.current.value === "") return; addTodoListItem(inputEl.current.value); inputEl.current.value = ""; }; const inCompletedList = todoList.filter((todo) => { return !todo.done; }); const completedList = todoList.filter((todo) => { return todo.done; }); return ( <> <Container centerContent p={{ base: "4", md: "6" }} maxWidth="3xl"> <Time/> <TodoTitle title="今日やること" as="h1" fontSize={{ base: "2xl", md: "3xl" }} /> <TodoAdd placeholder="ADD TODO" leftIcon={<AddIcon />} buttonText="TODOを追加" inputEl={inputEl} handleAddTodoListItem={handleAddTodoListItem} /> <TodoList todoList={inCompletedList} toggleTodoListItemStatus={toggleTodoListItemStatus} deleteTodoListItem={deleteTodoListItem} title="これからやること" as="h2" fontSize={{ base: "xl", md: "2xl" }} /> <TodoList todoList={completedList} toggleTodoListItemStatus={toggleTodoListItemStatus} deleteTodoListItem={deleteTodoListItem} title="やったよ!" as="h2" fontSize={{ base: "xl", md: "2xl" }} /> <LineChart pl='50' mt='1'/> </Container> </> ); } export default App;

エンジニアの方々のお力を貸していただければと思い、質問させていただきました。
ご教授いただけると幸いです。

よろしくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。