如何解决在 Nivo 折线图中显示日期从第 - 1 天开始
我尝试使用 Nivo 库实现折线图。
const data = [
{
id: 'Submission',color: 'hsl(213,70%,50%)',data: [
{
x: '2021-03-01',y: 24,},{
x: '2021-03-02',y: 31,...
我如何配置图表:
<ResponsiveLine
data={data}
margin={{ top: 0,right: 110,bottom: 70,left: 60 }}
xScale={{
type: 'time',format: '%Y-%m-%d',}}
xFormat="time:%Y-%m-%d"
yScale={{
type: 'linear',min: 'auto',max: 'auto',stacked: false,reverse: false,}}
curve="monotoneX"
axisTop={null}
axisRight={null}
axisLeft={{
orient: 'left',tickSize: 5,tickPadding: 5,tickRotation: 0,legend: 'Submission',legendOffset: -40,legendPosition: 'middle',}}
axisBottom={{
format: '%b %d',// tickRotation: -90,legend: 'Day',legendOffset: 40,}}
colors={{ scheme: 'spectral' }}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',direction: 'column',justify: false,translateX: 100,translateY: 0,itemsspacing: 0,itemDirection: 'left-to-right',itemWidth: 80,itemHeight: 20,itemOpacity: 0.75,symbolSize: 12,symbolShape: 'circle',symbolBorderColor: 'rgba(0,.5)',effects: [
{
on: 'hover',style: {
itemBackground: 'rgba(0,.03)',itemOpacity: 1,],]}
/>
然后它呈现(第一个元素是在 2 月 28 日),它是否具有日期格式(最后,我放了它如何呈现的屏幕截图):
解决方法
好的,我终于通过这本故事书找到了解决方案(useUTC,precision):https://nivo.rocks/storybook/?path=/story/line--time-scale
...
xScale={{
type: 'time',format: '%Y-%m-%d',useUTC: false,precision: 'day',}}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。