Question

我一直试图在一个容器中放入多个图表，但似乎找不到任何示例。我对Vuejs感到陌生，我一直在尝试阅读有关此方面的所有资源，但我确实找不到使之工作的方法。

图表如下：

<template>
  <highcharts :options="options"></highcharts>
</template>

<script>

import HighchartsVue from 'highcharts-vue'

import Highcharts from 'highcharts'

import highchartsMore from 'highcharts/highcharts-more'

Vue.use(HighchartsVue)

highchartsMore(Highcharts)

export default {
  props: ['options'],
  data() {
return {
}
  }
}
</script>

我的主要组件如下：

<template>
  <v-container fluid text-xs-center style="height: 90vh; max-height: 100%;">
     <v-layout row wrap>
      <v-flex xs2>
          <v-card flat>
              <Chart :options="chartOptions"/>
          </v-card>
        </v-flex>
      </v-layout>
  </v-container>
</template>
<script>

import Chart from '../components/Chart.vue'

var testdata = [
          // each slice of the pie gets its own color
          { y: 40, color: '#1DACE8', name: 'test1' },
          { y: 70, color: '#1C366B', name: 'test2' },
          { y: 55, color: '#F24D29', name: 'test3' },
          { y: 53, color: '#E5C4A1', name: 'test4' },
          { y: 95, color: '#C4CFD0', name: 'test5' }
        ]

var testdata2 = [
          // each slice of the pie gets its own color
          { y: 10, color: '#1DACE8', name: '1' },
          { y: 30, color: '#1C366B', name: '2' },
          { y: 45, color: '#F24D29', name: '3' },
          { y: 93, color: '#E5C4A1', name: '4' },
          { y: 15, color: '#C4CFD0', name: '5' }
        ]

export default {
  name: 'chartapp2',
  components: {
  Chart
  },

  data() {
    return {
      chartOptions:{
        chart: {
          polar: true,
          backgroundColor: '#F5F5F5'
},
        exporting: {
            buttons: {
                contextButton: {
                    theme: {
            fill:"#F5F5F5"
        }
                }
            }
        },
title: {
    text: 'City 1'
},

subtitle: {
    text: 'Railacc stuff'
},

pane: {
    startAngle: -22.5},

xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: false
},

yAxis: {
    min: 0,
    tickInterval: 1,
    labels: false
},

plotOptions: {
    series: {
        pointStart: 0,
        pointInterval: 45
    },
    column: {
        pointPadding: 0,
        groupPadding: 0,
        colorByPoint: true
    }
},

tooltip: {
            formatter: function () {
                return this.y, this.point.name;
            }
        },

series: [{
    type: 'column',
    name: '',
    data: testdata,
    pointPlacement: 'between'
},
{
    type: 'column',
    name: '2',
    data: testdata2,
    pointPlacement: 'between'
}]
      },
    }
  }
}
</script>

从理论上讲这应该可行，但是我看到的只是一个图表而不是单个容器中的2张图表。对如何使这项工作有任何想法吗？

编辑：想法是像这样https://www.highcharts.com/demo/combo。基本上，两个地块只有一个图例。而不是在一个或多个图中包含两个系列。我想在两个不同的图中将系列分成两个系列。

Answer 1

尝试串联使用

center: ['25%', '50%'],

描述图表中心位置的参数

Vuejs的一个容器中有多个图表

1 个答案: