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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

JavaScript

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

React.js

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

Q&A

0回答

301閲覧

victory chartがモバイルデバイス(iphone)でのみ表示されない。

ryousu

総合スコア0

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

JavaScript

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

React.js

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

0グッド

1クリップ

投稿2022/04/14 20:03

こちらの レポジトリ をnetlifyにデプロイし このurl がmac book proのchrome上で下記の画像のようにグラフが表示されるのは確認できるのですが、iphoneのchromeで表示するとグラフが表示されません。
victory chart の公式 doc のサイト, であればmac book proとiphoneのchromeから共にグラフが表示できているためなぜ自分のサイトでは表示できないのかが分かりません。

画像の説明をここに入力

コードの詳細は [こちらのレポジトリー](this repository)にあります。

重要な部分は以下のコードです。

import React from 'react'; import { StringOrNumberOrCallback, VictoryAxis, VictoryChart, VictoryLine, } from 'victory'; const Chart: React.FC = () => { const profitHistoryList = [ { datetime: '2021-12-31 00:00:00', cash: 10001.53, id: 57, }, { datetime: '2022-01-03 00:00:00', cash: 10001.53, id: 58, }, { datetime: '2022-01-18 00:00:00', cash: 9999.72, id: 59, }, { datetime: '2022-01-19 00:00:00', cash: 9999.72, id: 60, }, ]; const data = profitHistoryList.map((p) => ({ x: new Date(p.datetime), y: p.cash, })); const areaColor: StringOrNumberOrCallback = data[data.length - 1].y > 10000 ? 'green' : 'red'; const { innerHeight: height } = window; return ( <td className="w-40 md:w-full"> <VictoryChart style={{ background: { fill: 'black' }, }} height={(height * 1) / 12} scale={{ x: 'time' }} padding={{ top: 10, left: 10, right: 10, bottom: 10 }} > <VictoryLine data={data} style={{ data: { stroke: areaColor, }, }} /> <VictoryAxis dependentAxis style={{ axis: { stroke: 'none' } }} /> <VictoryAxis style={{ axis: { stroke: 'none' } }} /> </VictoryChart> </td> ); }; export default Chart;
import Position from 'Position'; import { VFC } from 'react'; import './App.css'; import './index.css'; const App: VFC = () => ( <div className="App"> <Position /> </div> ); export default App;

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問