如何在nvd3中将箱线图与折线图结合起来

Question

enter image description here

嗨，

我需要将箱线图与折线图结合起来。我正在使用 nvd3 库。我想在同一个图表中添加两个折线图，一条线会告诉平均值，另一条线会告诉当前状态。谁能帮我实现这个功能？

提前致谢！

configureChart = () => {
  this.user_story_options = {
    chart: {
      type: 'boxPlotChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 60,
        left: 40
      },
      color: ['darkblue', 'darkorange', 'green', 'darkred', 'darkviolet'],
      x: function(d) {
        return d.label;
      },
      // y: function(d){return d.values.Q3;},
      maxBoxWidth: 75,
      yDomain: [0, 500]
    }
  };
}

getData = () => {
  this.user_story_data = [{
      label: 1,
      values: {
        Q1: 180,
        Q2: 200,
        Q3: 250,
        whisker_low: 115,
        whisker_high: 400,
        outliers: [50, 100, 425]
      }
    },
    {
      label: 2,
      values: {
        Q1: 300,
        Q2: 350,
        Q3: 400,
        whisker_low: 225,
        whisker_high: 425,
        outliers: [175, 450, 480]
      }
    },
    {
      label: 3,
      values: {
        Q1: 100,
        Q2: 200,
        Q3: 300,
        whisker_low: 25,
        whisker_high: 400,
        outliers: [450, 475]
      }
    },
    {
      label: 4,
      values: {
        Q1: 75,
        Q2: 100,
        Q3: 125,
        whisker_low: 50,
        whisker_high: 300,
        outliers: [450]
      }
    },
    {
      label: 5,
      values: {
        Q1: 325,
        Q2: 400,
        Q3: 425,
        whisker_low: 225,
        whisker_high: 475,
        outliers: [50, 100, 200]
      }
    }
  ];
}

<div class="container-fluid">
  <nvd3 #userStoryNvd3 [options]="user_story_options" [data]="user_story_data"></nvd3>
</div>

Answer 1

我已经使用 d3 实现了这个要求。

https://github.com/Dhiraj1411/box-plot-combined-with-line-chart