如何使用highcharts向xAxis添加新的聚合?

wwwo4jvm  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(183)

我刚开始使用highcharts-vue,我基本上可以创建大多数图表,但我想在柱形图的xAxis上添加新的聚合,如ElasticSearch。

<template>
  <div>
    <b-col md="12">
      <highcharts :options="chartOptions"></highcharts>
    </b-col>
    <b-col md="12" style="margin-top: 40px">
      <highcharts :options="pieChartOptions"></highcharts>

    </b-col>

  </div>

</template>

<script>
import axios from 'axios'
import {mapActions} from "vuex";
import Highcharts from "highcharts";
import {Chart} from 'highcharts-vue'
import DashboardTable from "../../components/DashboardTable/DashboardTable";
import Widget from '@/components/Widget/Widget';

export default {
  name:"TestChart",
  components: {
    DashboardTable, Widget,
    highcharts: Chart
  },
  data(){
    return{
      chartOptions:{
        chart:{
          type: 'column'
        },
        title:{
          text: 'Deneme Bar Chart'
        },
        xAxis:{
          categories:['bengu', 'kursat', 'kenan', 'elif'],
        },
        yAxis:{
          title:{
            text: 'İçilen Kahve'
          }
        },
        series:[{
            name: 'Kahve',
            data: [2,8,5,7]
        }]
      },
      pieChartOptions:{
        chart:{
          type:'pie'
        },
        title:{
          text:'İçilen Kahve'
        },
        series:[{
          name:'Coffee',
          data:[{
            name: 'Espresso',
            y: 10.10
          },
            {
              name: 'Americano',
              y: 30.41
            },
            {
              name: 'Cafe Latte',
              y:35.90
            },
            {
              name: 'Filter Coffee',
              y: 20.59
            },
            {
              name: 'Turkish Coffee',
              y: 3.0
          }]
        }]
      }
    }
  }
}

</script>

<style>

</style>

下面是我的图表截图:

和ElasticSearch图表:

如您所见,我的xAxis有一个数据,即类别,但我想添加新的聚合。我显示了喝咖啡的数量。我可以为所有类别添加喝咖啡的类型吗?

zzlelutf

zzlelutf1#

堆叠给你的功能,以胶水另一个职位,只需添加新的系列与一种类型的饮用咖啡。

plotOptions: {
    series: {
        stacking: 'normal'
    }
},

API参考:https://api.highcharts.com/highcharts/plotOptions.series.stacking

相关问题