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

Question

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

Answer 1

Amchart с помощью ReactJs Demo (Pie Graph)

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; 

Answer 2

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

Реагент хорош при рендеринге Реагирующие компоненты. Все, что отображается в нереактивных библиотеках, будет выглядеть как черный ящик для 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.