Highcharts迷你圖中reactjs沒有jQuery的

Question

爲Highcharts迷你圖給出的示例代碼使用jQuery的。（https://www.highcharts.com/demo/sparkline）

但我應該不是在我的項目使用jquery。我在反應js中編寫了一個代碼，以便從另一個文件動態接受數據並呈現表格。我不知道如何在不使用jquery引用的情況下實現迷你圖表。

有人可以幫我嗎？

Answer 1

我重寫了React的演示。它在github上可用here。您也可以在React沙盒中看到它 - here。

所以我創建了兩個組件：

• SparkLine它建立從給出的選項
• SparkLineTable這需要在錶行（孩子）的圖表，並將其轉化爲圖表，如果他們有data-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')); 

給出這樣的輸出：

其變換部分<td>到<SparkLine />：

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} /> 
} 

Answer 2

我對你的情況建議是使用的，而不是highcharts這也太容易實現REACT_SPARKLINES 。

https://github.com/borisyankov/react-sparklines

鑑於此鏈接和岩石