我刚开始使用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有一个数据,即类别,但我想添加新的聚合。我显示了喝咖啡的数量。我可以为所有类别添加喝咖啡的类型吗?
1条答案
按热度按时间zzlelutf1#
堆叠给你的功能,以胶水另一个职位,只需添加新的系列与一种类型的饮用咖啡。
API参考:https://api.highcharts.com/highcharts/plotOptions.series.stacking