Question

expected chart

嗨，我需要制作这张图，看起来像1（？）中的3张图。我可以将这2个分割成小块，但是柱形图却很棘手。多亏了Wojciech Chmiel，我才能够使这张柱形图具有高图表的价值，但该图的行为有点奇怪，我无法添加yAxis，也无法像一种响应行为那样阻止该图推到顶部。 >

Answer 1

@Wojciech Chmiel 嗨，抱歉。 A columnrange chart with a bloxplot and 2 scatter

initChart (data) {
      this.chartOptions = merge(this.getBaseChartConfig(ChartTypes.BoxPlot), {
        xAxis: {
          categories: data.periods
        },
        series: [
          {
            type: 'columnrange',
            name: 'Observations',
            data:data.peerGroupStatisticReturns.dataRange,
            showInLegend: false
          },
          {
            type: 'boxplot',
            linkedTo: ':previous',
            data: data.peerGroupStatisticReturns.values
          },
          {
            type: 'scatter',
            name: data.names[1],
            marker: {
              symbol: 'diamond',
              fillColor: '#6598FD',
              radius: 6
            },            
            data: data.benchmarkReturnSeries.data
          },
          {
            type: 'scatter',
            name: data.names[2],
            marker: {
              symbol: 'square',
              fillColor: '#FFCC33'
            },            
            data: data.productReturnSeries.data
          }
        ]
      })
      
      // chart settings
const boxPlotConfig = {
  title: {
    text: ''
  },
  plotOptions: {
    boxplot: {
      fillColor: '#0076C0',
      medianColor: '#303030',
      medianWidth: 1,
      stemWidth: 0,
      whiskerWidth: 0,
      color: '#303030',
      showInLegend: false
    },
    columnrange: {
      color: '#66ADD9'
    },
    series: {
      enableMouseTracking: false,
      borderColor: '#303030'
    }
  },
  
  yAxis: {
    title: ''
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

现在，我已经散布了颜色并移动了标记，因此不要重叠，一个在列内向右，另一个在列内

高图，Vue组件。 1中的3个图表

1 个答案: