英文:
How to sort yaxis label in range bar chart in vue-apexcharts?
问题
我想绘制一个水平条形图，每个条形的颜色在某个范围内不同，
我发现Vue-Apexcharts有一个rangeBar类型的图表可以做到这一点。
但我希望y轴标签（05/23~05/30）能按升序显示，应该如何做？
或者有人可以推荐我一个更好的绘图套件（用于Vue.js）来实现这个吗？
非常感谢。
英文:
I want to draw a horizontal bar chart and each bar has different color in some range,
I found Vue-Apexcharts has rangeBar type chart can do this.
But I want yAxis label (05/23~05/30) can show in ascending order, how can I do?
Or can anyone recommend me a better drawing suite (for Vue.js) to do this?
Thank you so much.
答案1
得分: -1
要按升序排序y轴标签，您可以使用sort函数对传递给图表组件的数据数组进行排序。以下是一个示例：
<template>
<div>
<apexchart type="rangeBar" :options="options" :series="series"></apexchart>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
components: {
apexchart: VueApexCharts,
},
data() {
return {
options: {
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3'],
},
yaxis: {
labels: {
formatter: function(val) {
return val.split("~").shift();
},
},
},
},
series: [
{
data: [
{
x: 'Category 1',
y: ['05/23~05/30', '#FF0000'],
},
{
x: 'Category 2',
y: ['05/24~05/31', '#00FF00'],
},
{
x: 'Category 3',
y: ['05/25~06/01', '#0000FF'],
},
],
},
],
};
},
mounted() {
// Sort data array by y label
this.series[0].data.sort((a, b) => {
const [startA] = a.y[0].split('~');
const [startB] = b.y[0].split('~');
return new Date(startA) - new Date(startB);
});
},
};
</script>
在这个示例中，我在mounted生命周期钩子中对series[0].data数组使用了sort函数，以便按范围的开始日期（y轴标签中的~字符之前的部分）进行排序。我使用了split函数来提取开始日期，然后使用Date构造函数将其转换为可排序的值。
至于其他Vue.js图表库的推荐，您可以查看以下选项：
- Highcharts Vue: https://github.com/highcharts/highcharts-vue
- Chart.js Vue: https://github.com/apertureless/vue-chartjs
- ECharts Vue: https://github.com/ecomfe/vue-echarts
英文:
To sort the y-axis labels in ascending order, you can use the sort function to sort the data array that you're passing to the chart component. Here's an example:
<template>
<div>
<apexchart type="rangeBar" :options="options" :series="series"></apexchart>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
components: {
apexchart: VueApexCharts,
},
data() {
return {
options: {
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3'],
},
yaxis: {
labels: {
formatter: function(val) {
return val.split("~").shift();
},
},
},
},
series: [
{
data: [
{
x: 'Category 1',
y: ['05/23~05/30', '#FF0000'],
},
{
x: 'Category 2',
y: ['05/24~05/31', '#00FF00'],
},
{
x: 'Category 3',
y: ['05/25~06/01', '#0000FF'],
},
],
},
],
};
},
mounted() {
// Sort data array by y label
this.series[0].data.sort((a, b) => {
const [startA] = a.y[0].split('~');
const [startB] = b.y[0].split('~');
return new Date(startA) - new Date(startB);
});
},
};
</script>
In this example, I'm using the sort function on the series[0].data array in the mounted lifecycle hook to sort the data by the start date of the range (the first part of the y-axis label, before the ~ character). I'm using the split function to extract the start date and then using the Date constructor to transform it into a sortable value.
As for recommendations for other charting libraries for Vue.js, you can check out:
- Highcharts Vue: https://github.com/highcharts/highcharts-vue
- Chart.js Vue: https://github.com/apertureless/vue-chartjs
- ECharts Vue: https://github.com/ecomfe/vue-echarts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论