JavaScript图表工具FusionCharts Suite XT入门教程(九):使用API​​切片数据图

翻译|使用教程|编辑:吴园园|2019-10-29 09:40:26.790|阅读 42 次

概述:本文将为您介绍FusionCharts中使用API​​切片数据图的方法。

相关链接:

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如下所示,配置为切出图表数据图的图表:

JavaScript图表工具FusionCharts Suite XT入门教程(九):使用API切片数据图

上面示例的完整代码如下:

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

上图通过以下步骤呈现:

  1. 使用包括必要的库和组件import。例如fusioncharts图书馆等

  2. 将图表和主题添加为依赖项。

  3. 将图表配置存储在JSON对象中。在JSON对象中:

    将图表类型设置为pie2d。

    设置图表的宽度和高度(以像素为单位)。

    将设置dataFormat为JSON。

    将json数据嵌入为的值dataSource。

  4. beforeRender 调用事件以切片图表的数据图。

  5. 在中创建单选按钮,<div>以选择要切出的数据图。

  6. 功能已添加到单选按钮,以在运行时更新图表类型。

    想要了解或购买FusionCharts Suite XT正版授权的朋友欢迎咨询慧都官方在线客服

    关注“慧聚IT”微信公众号,及时获取产品最新消息和最新资讯

  7. JavaScript图表工具FusionCharts Suite XT入门教程(九):使用API切片数据图



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/slice-data-plot-using-custom-api-in-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat