ej2 Syncfusion Sparkline 组件不显示任何内容答案

【问题标题】：ej2 Syncfusion Sparkline component displays nothingej2 Syncfusion Sparkline 组件不显示任何内容
【发布时间】：2022-11-10 19:34:48
【问题描述】：

调用组件

 <SparkLine currentColor={"blue"} id="line-sparkline" type="Line" height="80px" width="250px" data={SparklineAreaData} color={"blue"} />

实际组件

import React from 'react'
import {SparklineComponent,Inject,SparklineTooltip} from '@syncfusion/ej2-react-charts'
import {SparklineAreaData} from '../../data/dummy'
const SparkLine = ({id,height,width,color,data,type,currentColor}) => {


  return (
        
        <SparklineComponent
        id={"line-sparkline"}
        height={"80px"}
        width={"250px"}
        lineWidth={1}
        valueType="Numeric"
        fill={"blue"}
        border={{ color:"blue", width: 2 }}
        dataSource={SparklineAreaData}
        xName='x'
        yName='y'
        type={"Line"}
        >
          <Inject services={[SparklineTooltip]} />
        </SparklineComponent>
        
        
  )
}

export default SparkLine

学习同步融合创建一个简单的迷你图，但它在前端也没有显示任何错误，但是当我检查时实际上有一些元素标签，但它什么也没显示

【问题讨论】：

标签： reactjs syncfusion ej2-syncfusion syncfusion-chart

【解决方案1】：

这个问题是由于数据格式错误引起的。您的 x 轴变量名称和 y 轴变量名称必须与道具 xName 和 yName 相同。如果您的虚拟数据如下所示：

const dummyData = [{
  { xval: 1, yval: 6 },
  { xval: 2, yval: 7 },
  { xval: 3, yval: 4 },
  { xval: 4, yval: 8 },
  { xval: 5, yval: 10 },
}]

道具xName="xval" 和yName="yval"

查看完整示例https://ej2.syncfusion.com/react/documentation/sparkline/getting-started/

【讨论】：

【解决方案2】：

我也遇到过这个问题。您可以通过查看同步融合文档来解决此问题。更正以下内容。

改变
xName='x' 到 xName = 'xval'

改变

y 名称='y' 到 y 名称 = 'yuval'

现在它应该可以正常工作了。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

您的 xName 和 yName 道具的值必须与您的数据对象属性名称相同例如

如果您的数据对象是

const dummyData = [{
    { xvalue: 1, yvalue: 6 },
    { xvalue: 2, yvalue: 7 },
    { xvalue: 3, yvalue: 4 },
    { xvalue: 4, yvalue: 8 },
    { xvalue: 5, yvalue: 10 },
  }]

xName 和 yName 道具值将是

    xName='xvalue'
    yName='yvalue'

像这样：

 <SparklineComponent
    id={"line-sparkline"}
    height={"80px"}
    width={"250px"}
    lineWidth={1}
    valueType="Numeric"
    fill={"blue"}
    border={{ color:"blue", width: 2 }}
    dataSource={SparklineAreaData}
    xName='xvalue'
    yName='yvalue'
    type={"Line"}
    >

【讨论】：