Создание High-Chart-Sparkline-графа в ячейке Ag-grid для реактивного проекта - PullRequest
Новая
       37

Создание High-Chart-Sparkline-графа в ячейке Ag-grid для реактивного проекта

0 голосов
/ 24 января 2019

Я хочу показать диаграмму старшего разряда для списка ценных бумаг. Я использую ag-grid для создания структуры таблицы. Мне нужно показать диаграмму хай-чарт-спарклайн для движения цены акций за последние 5 дней в одном из столбцов.

Я пытался использовать функцию cellrenderer ag-grid для рендеринга диаграммы, но она не рендерила диаграмму.

Может ли кто-нибудь помочь сообщить, можем ли мы вообще создать диаграмму спарклайн-старшей диаграммы внутри Ag-сетки.

Столбец Ag-сетки, в котором будет создан график 

 { headerName: 'Security Chart', field: 'SecurityChartData', width: 300, suppressMenu: true ,  cellRenderer: this.sparkLine }

функция sparkLine, в настоящее время использующая данные выборки 7, 5, 6, 6, 4 

sparkLine() {
            const dataAttr =  "7, 5, 6, 6, 4 ".split('; ') ;
            const data = dataAttr[0].split(', ').map(Number);         
            const options = {
              series: [{
                data,
                pointStart: 1
              }],
              chart: {
                type: dataAttr || 'area'
              }
            }
            return <SparkLine options={options} />
          }

Спарклайн код: 

import React, { Component }  from 'react' ;
import Highcharts from 'highcharts' ;


const defaultOptions = {
  chart: {
    backgroundColor: null,
    borderWidth: 0,
    type: 'area',
    margin: [2, 0, 2, 0],
    width: 250,
    height: 40,
    style: {
      overflow: 'visible',
      align : 'center'
    },

    // small optimalization, saves 1-2 ms each sparkline
    skipClone: true
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    startOnTick: false,
    endOnTick: false,
    tickPositions: []
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    tickPositions: [0]
  },
  legend: {
    enabled: false
  },
  tooltip: {
    backgroundColor: 'red',
    borderWidth: 1,
    hideDelay: 0,
    shared: true,
    padding: 8,
    borderColor: 'white',
    borderRadius: 3,
    positioner: function (w, h, point) {
      return { x: point.plotX - w / 2, y: point.plotY - h };
    }
  },
  plotOptions: {
    series: {
      animation: false,
      lineWidth: 1,
      shadow: false,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      marker: {
        radius: 1,
        states: {
          hover: {
            radius: 2
          }
        }
      },
      fillOpacity: 0.25
    },
    column: {
      negativeColor: '#910000',
      borderColor: 'silver'
    }
  },

  series: [{
    data: [1,2,3]
  }]
};


export default class SparkLine extends Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    const options = Highcharts.merge(defaultOptions, this.props.options)
    this.chart = Highcharts.chart(this.container, options)
  }

  componentWillUnmount () {
    this.chart.destroy()
  }

  render () {
    return (
        <td 
          ref={container => this.container = container}
        >
        </td>
    )
  }
}
...