在React中使用select标签并使用state在带有React Charts的数据集之间切换

javascript html reactjs data-visualization

72 观看

1回复

98 作者的声誉

我正在使用React Charts。我有一个折线图,我希望能够在2组数据之间切换。使用标签我做了一个下拉列表。看一个实时示例:

https://codesandbox.io/s/mm2vnz6869

转到下拉菜单,然后切换到“收入”。请注意,它会根据需要切换到另一组数据。但是现在尝试切换回“支出”。注意它不起作用。这是为什么?有人可以看看我的逻辑,让我知道我做错了吗?谢谢。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Line } from 'react-chartjs-2';

let lineData;

const lineDataSpend = {
  labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
  datasets: [
    {
      label: 'Spend - Account 1',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'green',
      borderColor: 'green',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'green',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'Spend - Account 2',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'blue',
      borderColor: 'blue',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'blue',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [25, 5, 8, 53, 96, 35, 20]
    }
  ]
};

const lineDataRev = {
  labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
  datasets: [
    {
      label: 'Revenue - Account 1',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'red',
      borderColor: 'red',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'red',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [27, 9, 37, 31, 102, 42, 19]
    },
    {
      label: 'Revenue - Account 2',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'yellow',
      borderColor: 'yellow',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'yellow',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [1, 29, 4, 112, 26, 49, 81]
    }
  ]
};

lineData = lineDataSpend; //init the graph data to 'Spend'

class App extends Component {

  constructor(props) {
    super(props);
    this.changeMetric = this.changeMetric.bind(this);

    this.state = {
      selectedMetric: 'Spend'
    };
  }

  changeMetric(event) {

    this.setState({
      selectedMetric: event.target.value
    });

    switch (event.target.value) {
      case 'Spend':
        lineData = lineDataSpend;
        break;
      case 'Revenue':
        lineData = lineDataRev;
        break;
      default:
    }
  }

  render() {
    const lineOptions = {
      title: {
        display: true,
        text: 'Account 1 vs Account 2'
      },
      tooltips: {
        enabled: true,
        callbacks: {
          label: function (value, data) {
            console.log('data', data)
            const currentLabel = data.datasets[value.datasetIndex].label;
            return currentLabel + ': ' + '$' + value.yLabel;
          }
        }
      },
      legend: {
        display: true
      },
      maintainAspectRatio: true,
      scales: {
        yAxes: [{
          ticks: {
            callback: function (value) {
              return '$' + parseFloat(value.toFixed(2));
            }
          },
          stacked: false,
          gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
          }
        }],
        xAxes: [{
          gridLines: {
            display: false
          }
        }]
      }

    };

    return (
      <div>


        <select onChange={this.changeMetric} value={this.state.selectedMetric}>
          <option value="Spend">Spend</option>
          <option value="Revenue">Revenue</option>
        </select>

        <div className="row">
          <div className="col-xl-10">
            <div className="card">
              <div className="card-header">
                <i className="fa fa-align-justify" />
              </div>
              <div className="card-block">
                <Line data={lineData} options={lineOptions} />
              </div>
            </div>
          </div>
        </div>

      </div>

    )

  }
}


render(<App />, document.body);
作者: fromspace 的来源 发布者: 2017 年 9 月 15 日

回应 1


3

2328 作者的声誉

决定

您将lineData初始化为lineDataSpend导致了此问题。如果直接将默认对象分配给lineData而不是使其保留lineDataSpend的对象,那么您的问题将得到解决。

因此,如果您更改第103行,

lineData = lineDataSpend; //init the graph data to 'Spend'

lineData = {
labels: ['March', 'April', 'May', 'June', 'July', 'August', 'September'],
  datasets: [
    {
      label: 'Spend - Account 1',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'green',
      borderColor: 'green',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'green',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'Spend - Account 2',
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'blue',
      borderColor: 'blue',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'blue',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [25, 5, 8, 53, 96, 35, 20]
    }
  ]
}

您的问题将得到解决。您可以在此处测试修复-https: //codesandbox.io/s/3rko469pkm

但是,即使我不清楚您的初始作业为什么会引起问题,因为该作业看起来还不错。您将不得不更深入地了解这个问题背后的原因。

作者: codeslayer1 发布者: 2017 年 9 月 15 日
32x32