JavaScript圖表工具FusionCharts Suite XT入門教程（九）：使用API??切片數(shù)據(jù)圖

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(yè)的JavaScript圖表。

JavaScript圖表工具，為什么選擇FusionCharts？點(diǎn)擊了解！

點(diǎn)擊下載FusionCharts Suite XT最新試用版

使用API切片數(shù)據(jù)圖

上面示例的完整代碼如下：

import React, {Component} from 'react';import ReactDOM from 'react-dom';import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import ReactFC from 'react-fusioncharts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);const chartConfigs = {
    type: 'Pie2D',
    width: 450,
    height: 250,
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Market Share of Web Servers",
            "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
            "showPercentValues": "1",
            "useDataPlotColorForLabels": "1",
            "enableMultiSlicing": "0",
            "theme": "fusion"
        },
        "data": [{
            "label": "Apache",
            "value": "32647479"
        }, {
            "label": "Microsoft",
            "value": "22100932"
        }, {
            "label": "Zeus",
            "value": "14376"
        }, {
            "label": "Other",
            "value": "18674221"
        }]
    }};class Chart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chart: {},
            currentVal: 'none'
        }
        this.renderComplete = this.renderComplete.bind(this);
        this.radioHandler = this.radioHandler.bind(this);
        this.sliceClicked = this.sliceClicked.bind(this);
    }
    renderComplete(chart) {
        this.setState({
            chart
        });
    }
    // Handler for radio buttons to slice data plot.
    radioHandler(e) {
        if (e.currentTarget.value === 'none') {
            this.state.chart.options.dataSource.data.map((data, index) => {
                this.state.chart.slicePlotItem(index, false);
            });
        } else {
            this.state.chart.slicePlotItem(e.currentTarget.value, true);
        }
        this.setState({
            currentVal: e.currentTarget.value        });
    }
    // Event callback for 'dataplotClick'.
    // Makes the relevant radio active when a plot is clicked.
    sliceClicked(eventObj, dataObj) {
        this.setState({
            currentVal: eventObj.data.isSliced ? 'none' : eventObj.data.dataIndex        });
    }
    render() {
        return (
            <div>
              <ReactFC                {...chartConfigs}
                onRender={this.renderComplete}
                fcEvent-dataplotClick={this.sliceClicked}
              />
              <br />
              <center>
                <span>Slice out:</span>
                <div className="change-type">
                  <div>
                    <input
                      type="radio"
                      value="none"
                      onChange={this.radioHandler}
                      checked={this.state.currentVal === 'none'}
                    />
                    <label>None</label>
                  </div>
                  <div>
                    <input
                      type="radio"
                      value="0"
                      onChange={this.radioHandler}
                      checked={parseInt(this.state.currentVal) === 0}
                    />
                    <label>Apache</label>
                  </div>
                  <div>
                    <input
                      type="radio"
                      value="1"
                      onChange={this.radioHandler}
                      checked={parseInt(this.state.currentVal) === 1}
                    />
                    <label>Microsoft</label>
                  </div>
                  <div>
                    <input
                      type="radio"
                      value="2"
                      onChange={this.radioHandler}
                      checked={parseInt(this.state.currentVal) === 2}
                    />
                    <label>Zeus</label>
                  </div>
                  <div>
                    <input
                      type="radio"
                      value="3"
                      onChange={this.radioHandler}
                      checked={parseInt(this.state.currentVal) === 3}
                    />
                    <label>Other</label>
                  </div>
                </div>
              </center>
            </div>
        )
    }}ReactDOM.render(
    <Chart / > ,
    document.getElementById('root'),);