vue.js - Vuejs中一个容器中的多个highcharts

问题描述

我一直在尝试将多个 highcharts 放入一个容器中，但我似乎找不到任何关于如何做到这一点的示例。我对 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。基本上，这两个情节只有一个传说。而不是在一个图表或两个图表中有两个系列。我想在两个不同的图表中将该系列分成两个系列。

标签： vue.jshighchartsvuetify.js

vue.js - Vuejs中一个容器中的多个highcharts

问题描述

解决方案

推荐阅读