こちらの レポジトリ を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;
あなたの回答
tips
プレビュー