翻譯|使用教程|編輯:吳園園|2019-10-29 09:40:26.790|閱讀 411 次
概述:本文將為您介紹FusionCharts中使用API??切片數據圖的方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案,目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。
JavaScript圖表工具,為什么選擇FusionCharts?點擊了解!
點擊下載FusionCharts Suite XT最新試用版
使用API切片數據圖
FusionCharts Suite XT包含高級功能,可提供多種API,可在圖表的ife周期的不同階段或與圖表進行交互時使用。這些功能包括完成圖表渲染,在運行時處理單選按鈕等。
本文重點介紹如何使用特定于圖表的自定義API切片Pie 2D圖表的數據圖。
pie2d如下所示,配置為切出圖表數據圖的圖表:

上面示例的完整代碼如下:
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'),);上圖通過以下步驟呈現:
使用包括必要的庫和組件import。例如fusioncharts圖書館等
將圖表和主題添加為依賴項。
將圖表配置存儲在JSON對象中。在JSON對象中:
將圖表類型設置為pie2d。
設置圖表的寬度和高度(以像素為單位)。
將設置dataFormat為JSON。
將json數據嵌入為的值dataSource。
beforeRender 調用事件以切片圖表的數據圖。
在中創建單選按鈕,<div>以選擇要切出的數據圖。
功能已添加到單選按鈕,以在運行時更新圖表類型。
想要了解或購買FusionCharts Suite XT正版授權的朋友歡迎咨詢
關注“慧聚IT”微信公眾號,及時獲取產品最新消息和最新資訊

本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: