реактивные диаграммы "сложены: правда" не работает - PullRequest
Новая
       72

реактивные диаграммы "сложены: правда" не работает

0 голосов
/ 15 февраля 2019

Я создал диаграмму в ReactJS, используя react-charts, с несколькими барами.

Это мой компонент: 

import React, { Component } from "react";
import { Chart } from "react-charts";
import axios from "axios";
const qs = require("qs");

class Volume extends Component {
  state = {
    load_vol_chart: true,
    volume_chart_data: []
  };

  componentDidMount() {
    this.getVolumeChartData();
  }

  getVolumeChartData() {
    var name = this.props.name;
    axios
      .post(
        `http://api.mydomain.in/details/`,
        qs.stringify({ type: name })
      )
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            volume_chart_data: [
              {
                label: "Label1",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: (vol.volume * vol.percentage) / 100
                }))
              },
              {
                label: "Label2",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: vol.volume
                }))
              }
            ],
            load_vol_chart: false
          });
        }
      });
  }

  render() {
    return (
      <div className="inner-content" style={{ marginTop: "12px" }}>
        <h3>
          <i className="fa fa-caret-right" /> {"  "}
          {this.props.symbol}: Volume
        </h3>
        {this.state.load_vol_chart ? null : (
          <div
            style={{
              width: "100%",
              height: "400px",
              marginTop: "35px",
              marginBottom: "10px"
            }}
          >
            <Chart
              data={this.state.volume_chart_data}
              series={{ type: "bar" }}
              axes={[
                { primary: true, type: "ordinal", position: "left" },
                { position: "bottom", type: "linear" }
              ]}
              primaryCursor
              secondaryCursor
              tooltip
            />
          </div>
        )}
      </div>
    );
  }
}

export default Volume;

Что мне нужно:

  1. Бар Label1 рассчитывается по некоторой формуле.В подсказке к диаграммам я хочу отобразить дополнительное значение, например: vol.percent.Также я могу показать этот процент на столбце как метку на нем?

  2. Я хочу, чтобы эти графики были сложены.Я пробовал stacked:true, он не работает.

Как мне этого добиться?

Заранее спасибо.

...