Highcharts Sparkline- in reactjs ohne JQuery

Question

Das Codebeispiel gegeben für Highcharts Sparkline- verwendet jquery. (https://www.highcharts.com/demo/sparkline)

Aber ich sollte nicht jquery in meinem Projekt verwenden. Ich schrieb einen Code in der Antwort js, um die Daten dynamisch von einer anderen Akte zu akzeptieren und die Tabelle zu rendern. Ich habe keine Idee, wie man das Sparkline-Diagramm ohne die Verwendung von jquery Referenzen einführt.

Kann mir bitte jemand dabei helfen?

Answer 1

Ich schrieb die Demo zu React um. Es ist auf github here verfügbar. Sie können es auch live in React Sandbox sehen - here.

Also habe ich zwei Komponenten:

• SparkLine, die ein Diagramm aus den gegebenen Möglichkeiten baut
• SparkLineTable, die die Tabellen Zeilen (Kinder) und wandeln sie in ein Diagramm nimmt, wenn sie data-sparkline Attribut
haben

so App wie folgt:

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')); 

gibt die Ausgabe wie folgt aus:

Der Teil der <td>-<SparkLine /> verwandelt: für Ihr Szenario

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

Mein Vorschlag REACT_SPARKLINES statt highcharts ist zu verwenden, die auch einfach zu implementieren .

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

Ansicht Link und Rock