0

我正在使用@devexpress/dx-react-chart-material-ui 的图表开发应用程序。我想将顶部曲线绘制为实线。但是我没有找到实现它的方法。所以我正在尝试使用样条线。但是样条曲线与区域序列的顶部曲线不匹配。我的代码如下。

import React from "react";
import Paper from "@material-ui/core/Paper";
import {
  Chart,
  ArgumentAxis,
  ValueAxis,
  AreaSeries,
  SplineSeries,
} from "@devexpress/dx-react-chart-material-ui";
import { withStyles } from "@material-ui/core/styles";

const Area = (props) => (
  <AreaSeries.Path
    {...props}
    path={area()
      .x(({ arg }) => arg)
      .y1(({ val }) => val)
      .y0(({ startVal }) => startVal)
      .curve(curveCatmullRom)}
  />
);

export default class LCharts extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: props.seriesData,
    };
  }

  render() {
    const { data: chartData } = this.state;

    return (
      <Paper>
        <Chart data={chartData}>
          <ArgumentAxis />
          <ValueAxis />
          <AreaSeries
            name="Total"
            valueField="total"
            argumentField="state"
            seriesComponent={Area}
          />
          <SplineSeries valueField="total" argumentField="state" />

        </Chart>
      </Paper>
    );
  }
}

生成的屏幕截图： 结果图像

是否可以将顶部曲线绘制为实线？如何实施？

谢谢你。

4

0 回答 0