Можем ли мы использовать responseJS с amCharts

reactjs amcharts

3148 просмотра

2 ответа

164 Репутация автора

Интересно, возможно ли технически использовать responseJS с библиотекой графиков amCharts? Если да, кто-нибудь пробовал или есть демо, на которое я мог бы сослаться. Кроме того, ожидается ли улучшение качества работы amCharts в результате использованияactJS?

Автор: Sushanta Deb Источник Размещён: 18.07.2016 08:52

Ответы (2)


0 плюса

1478 Репутация автора

Да, вам нужно создать компонент-оболочку и подключить инициализацию библиотеки. Конфиг обычно лучше всего передать компоненту в качестве реквизита.

React хорош в рендеринге компонентов React. Все, что отрисовывается нереагирующими библиотеками, будет для React черным ящиком, и вы не увидите никакой выгоды. Фактически, вы можете столкнуться с большими накладными расходами, если не будете хорошо кодировать свой компонент-обертку и продолжите повторную инициализацию или обновление библиотеки, даже если конфигурация не изменилась.

Мы используем высокие графики для столбчатых диаграмм в проекте, над которым я работаю. Код не является открытым исходным кодом, а также слишком велик и сложен, чтобы его можно было использовать в качестве простого примера, но вот основные моменты того, как он выглядит:

import React from 'react';
import Highcharts from 'highcharts';

export default React.createClass({
    displayName: 'BarChart',

    componentDidMount: function () {
        this._initChart();
    },

    shouldComponentUpdate: function (nextProps) {
        return nextProps.chartData != this.props.chartData || nextProps.emptyMessage != this.props.emptyMessage;
    },

    componentDidUpdate: function () {
        this._initChart();
    },

    _initChart: function () {
        //do not attempt to render if there's no data, insert placeholder instead
        //since it's a jquery plugin we also render the placeholder with jquery to keep React out of it
        if (!this.props.chartData || this.props.chartData.length == 0) {
            var jqContainer = $(this.refs.container);
            var height = jqContainer.height() + 'px';
            jqContainer.html($('<span class="bar-chart-empty-placeholder"><i class="' +
                ((this.props.emptyMessage.indexOf('Loading') > -1) ? 'fa fa-spinner fa-pulse' : '') + '"></i> ' +
                this.props.emptyMessage + '</span>').css({'height': height, 'line-height': height}));
            return;
        }

        //data transformation
        //some logic here, transforming data from API to format expected by highcharts

        $(this.refs.container).highcharts({
            chart: {
                type: 'column'
            },
            exporting: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            xAxis: {
                tickWidth: 0,
                tickPixelInterval: 130,
                type: 'datetime',
                labels: {
                    formatter: function () {
                        return dateFormatter(this.value, dateGrain);
                    }
                }
            },
            yAxis: {
                min: '0',
                labels: {
                    format: '{value} %'
                },
            },
            plotOptions: {
                column: {
                    stacking: 'percent',
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black'
                        }
                    }
                }
            },
            series: seriesArray
        });
    },

    render: function () {
        //output the title and the container div, contents will be rendered by highcharts
        return (
            <div className="chart-legend clearfix">
                <h4 className="pull-left">{this.props.title}</h4>

                <div ref="container"
                     style={{height: '300px', paddingLeft: 0, marginTop: '50px', marginBottom: '30px'}}
                ></div>
            </div>
        );
    }
});

Для дополнительной оптимизации, если заголовок никогда не меняется, мы можем вызвать _initChart в shouldComponentUpdate, когда реквизиты изменились, и всегда возвращать значение true, чтобы html контейнера никогда не отображался React.

Автор: Miloš Rašić Размещён: 19.07.2016 03:34

-1 плюса

14 Репутация автора

Решение

Amchart с использованием ReactJs Demo (круговая диаграмма)

import React from "react";
import AmCharts from "@amcharts/amcharts3-react";
import { graphType } from "../Graph/GraphType";
import { toolTipType } from "../Graph/ToolTipType";

class PieGraph extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
  dataProvider: JSON.parse(props.dataSet.Data)
};
}
render() {
    // Render the chart
    var graphProperty = this.props.dataSet;
    var controlId=this.props.controlKey;
     var legendId="legendDiv_"+controlId;

    var chartType = graphProperty.GraphType;
    var is3DChart = graphProperty.Is3DChart;
    var toolTipFormat = graphProperty.ToolTipFormat;
    var isLegendRequired = graphProperty.IsLegendRequired;
    var subTitle = graphProperty.SubTitle;


    var radious="";
    var innerRadius="";
    if (chartType == graphType.Doughnut) {
        radious = "30%";
        innerRadius = "35%";
    }

     var title=[{
        text : subTitle,
         id: "Title-1"
        //size: 15
    }];

    var depth3D="";
    var angle="";
    if (is3DChart)
    {
        depth3D = 8;
        angle = 20;
    }

    var labelText= "[[percents]]%([[value]])";
    var balloonText= "[[sliceText]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";

    if (toolTipFormat == "None" || toolTipFormat == toolTipType.None) {
        labelText = "[[value]]";
        balloonText = "";
    }
    else if (toolTipFormat == "ShowValue" || toolTipFormat == toolTipType.ShowValue) {
        labelText = "[[value]]";
        balloonText = "[[sliceText]]<br><span style='font-size:14px'><b>[[value]]</b></span>";
    }
    else if (toolTipFormat == "ShowPercentage" || toolTipFormat == toolTipType.ShowPercentage) {
        labelText = "[[percents]]%";
        balloonText = "[[sliceText]]<br><span style='font-size:14px'>([[percents]]%)</b></span>";
    }

    var marginTop=10;
    if(subTitle== "")
    marginTop = -50;


    var legend="";
    var isfromRportDetail=1;//Temporary assume true....
    if(isLegendRequired)
    {

            var legendEqualWidths=false;
            var lagendPosition="";
            var labelWidth="";
            var legendMarginLeft="";
            var legendalign="";
            if (isfromRportDetail) {  //added this condition for reportdetail charts for else in running other report chart
                lagendPosition = "right";
                legendMarginLeft = 0;
                legendEqualWidths = true;
                legendalign="right";
            }
            else {
                legendalign = "center";
                legendEqualWidths = false;
                labelWidth = 1;
            }

            legend=[{
                   divId:legendId,
                    color : "#999999",
                    markerSize : 3,
                    markerBorderThickness : 4,
                    valueText : "",
                    truncateLabels : 15,
                    position :lagendPosition,
                    marginLeft : legendMarginLeft,
                    equalWidths :labelWidth,
                    align : legendalign,
                    labelWidth : legendEqualWidths,
                    markerType: "circle",
                    listeners: [{
                                event: "clickSlice",
                                method: function (event) {
                                    if (event.dataItem.dataContext.url != undefined) {
                                            if (event.dataItem.dataContext.url != "")
                                            popdlgrs(event.dataItem.dataContext.url, "_blank", 800, 650);
                                    }
                                    else {
                                            return "";
                                    }
                                }
                    }]

            }];

    }


        return (
            <AmCharts.React
                type="pie"
                theme="light"
                startAngle="355"
                color="#999999"
                labelRadius="20"
                titles={title} 
                pullOutRadius="12%"
                precision="2"
                percentPrecision="2"
                thousandsSeparator=","
                decimalSeparator="."
                marginBottom="10"
                marginTop={marginTop}
                radius={radious}
                depth3D = {depth3D}
                angle = {angle}
                innerRadius={innerRadius}
                dataProvider={this.state.dataProvider}
                valueField={graphProperty.ChartDataFields}
                titleField={graphProperty.ChartCetegoryFields}
                labelText = {labelText}
                balloonText = {balloonText}
                colors = {["#ED807D", "#F0BF73", "#B5D766", "#9BDDDB", "#8EC5E4", "#D094DC", "#CDDC39", "#3396da", "#b85acc", "#60b2ae", "#85ae21", "#eda22d", "#e54c4f", "#D66C6E", "#8BC24A", "#70D5C7", "#ED807D", "#F0BF73", "#B5D766", "#9BDDDB", "#8EC5E4", "#D094DC", "#CDDC39", "#3396da", "#b85acc", "#60b2ae", "#85ae21", "#eda22d", "#e54c4f", "#D66C6E", "#8BC24A", "#70D5C7"]}
                legend={legend}
                balloon={[{
                    fixedPosition: "true",
                    drop: "true"
                }]}

                listeners={ 
                    [{
                                event: "clickSlice",
                                method: function (event) 
                                       {

                                                    if (event.dataItem.dataContext.url != undefined) {
                                                                if (event.dataItem.dataContext.url != "")
                                                                        popdlgrs(event.dataItem.dataContext.url, "_blank", 800, 650);
                                                    }
                                                    else {
                                                        return "";
                                                    }

                                      }
                   }]
                }



            />);
}

 }
 export default PieGraph;
Автор: user8324674 Размещён: 18.07.2017 11:51
Вопросы из категории :
32x32