Javascript 不带Jquery的reactjs中的Highcharts闪烁

Highcharts Sparkline的示例代码使用jquery。（）

但是我不应该在我的项目中使用jquery。我在react js中编写了一个代码来动态地接受来自另一个文件的数据并呈现表。我不知道如何在不使用jquery的情况下实现sparkline图表

---

有人能帮我吗？

我重新编写了演示以做出反应。它在github上提供。您还可以在React sandbox-中看到它

因此，我创建了两个组件：

• SparkLine

  从给定选项构建图表

• SparkLineTable

  它获取表格行（子行），并将它们转换为图表（如果它们具有

  数据sparkline

  属性）

因此，应用程序如下：

import React from 'react';
import { render } from 'react-dom';
import SparkLineTable from './components/SparkLineTable.jsx';

const App = () =>
  <SparkLineTable>
    <thead>
      <tr>
        <th>State</th>
        <th>Income</th>
        <th>Income per quarter</th>
        <th>Costs</th>
        <th>Costs per quarter</th>
        <th>Result</th>
        <th>Result per quarter</th>
      </tr>
    </thead>
    <tbody id="tbody-sparkline">
      <tr>
        <th>Alabama</th>
        <td>254</td>
        <td data-sparkline="71, 78, 39, 66 " />
        <td>296</td>
        <td data-sparkline="68, 52, 80, 96 " />
        <td>-42</td>
        <td data-sparkline="3, 26, -41, -30 ; column" />
      </tr>
    </tbody>
  </SparkLineTable>;

render(<App />, document.getElementById('app'));

从“React”导入React；
从'react dom'导入{render}；
从“./components/SparkLineTable.jsx”导入Sparkinetable；
常量应用=（）=>
陈述
收入
季度收入
成本
每季度成本
结果
每季度成绩
阿拉巴马州
254
296
-42
;
渲染(

将
转换为
的部件：

toSparkLine（儿童）{
让标题
返回React.Children.map（Children，child=>{
if（！React.isValidElement（child））返回子项
if（child.type=='th'）头=child.props.children
if（child.props['data-sparkline']）{
返回此.sparkLine（子项，标题）
}
if（child.props.children）{
child=React.cloneElement（child{
儿童：这个。托斯卡林（儿童。道具。儿童）
})
}
返回儿童
})
}
火花线（元素、标题）{
const dataAttr=element.props['data-sparkline'].split（'；'））
常量数据=dataAttr[0]。拆分（'，'）。映射（编号）
常量选项={
系列：[{
数据，
起点：1
}],
工具提示：{
headerFormat:`${header}，Q{point.x}:
`，
pointFormat:“{point.y}.000美元”
},
图表：{
类型：dataAttr[1]| |“区域”
}
}
返回
}
我对您的场景的建议是使用REACT_SPARKLINES而不是highcharts，因为highcharts太容易实现


查看此链接并点击rock
您能解释代码的哪一部分是您的问题吗？所有jquery函数都可以替换为本机js函数。从td属性获取数据的部分。
toSparkLine(children) {
  let header

  return React.Children.map(children, child => {
    if (!React.isValidElement(child)) return child

    if (child.type === 'th') header = child.props.children

    if (child.props['data-sparkline']) {
      return this.sparkLine(child, header)
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: this.toSparkLine(child.props.children)
      })
    }

    return child
  })
}

sparkLine(element, header) {
  const dataAttr = element.props['data-sparkline'].split('; ')

  const data = dataAttr[0].split(', ').map(Number)
  const options = {
    series: [{
      data,
      pointStart: 1
    }],

    tooltip: {
      headerFormat: `<span style="font-sze:10px">${header}, Q{point.x}: </span><br/>`,
      pointFormat: '<b>{point.y}.000</b> USD'
    },
    chart: {
      type: dataAttr[1] || 'area'
    }
  }

  return <SparkLine options={options} />
}