时间戳

首页 > 解决方案 > 有没有办法将堆积条形图与 Apexcharts（或类似）一起使用并分离数据？

javascript - 有没有办法将堆积条形图与 Apexcharts（或类似）一起使用并分离数据？

问题描述

我希望我的数据如下：

first_stacked_bar：（标签）数学| （数据，我上过的所有数学课程）Math_course_1，Math_course_2 ....

second_stacked_bar：（标签）物理| （数据）Physics_course_1，Physics_course_2 ....

third_stacked_bar：（标签）经济| （数据）Economy_course_1，Economy_course_2 ....

也就是说，我想在一个图中有多个堆叠条，它们之间没有任何联系（第一门数学课程与第一门物理或经济课程没有关系）。查看几个图表包中的示例，情况并非如此（与例如https://apexcharts.com/vue-chart-demos/bar-charts/stacked/#相比，其中每个第一个数据条目都共享“Marine Sprite”） .

目前，我正在将每一行拆分为自己的图表，该图表正在运行，但效果不佳或效果不佳。

如果有人有要推荐的图表包或要分享的想法，我将非常高兴。我在我的项目中使用 Vue.js，所以如果它也适用于 Vue，那就太好了。

标签： javascriptvue.jschartsstacked-chartapexcharts

解决方案

没有关系的堆叠图

所以我终于让它与 Apexcharts 一起工作。


代码：

教育图表

<div>
<div v-for="(area, i) in getAreas" :key="i">
  <EducationCoursesChart :school="school" :area="area" />
</div>

教育图表

<div id="barchart">
    <div class="barChartAreaWrapper">
      <p class="barChartArea">{{area}}</p>
    </div>
    <div class="barChartDataWrapper">
      <apexchart
        class="barChartData"
        type="bar"
        height="30"
        :options="chartOptions"
        :series="getCourses"
      ></apexchart>
    </div>
  </div>

方法获取课程： 

getCourses() {
      var courses = [];
      this.school.courses.forEach(course => {
        var dataArray = [];
        if (course.area === this.area) {
          dataArray.push(course.credits);
          courses.push({ name: course.name, data: dataArray });
        }
      });
      return courses;
    }

可能有更好的方法来解决这个问题，但正如您从上面的代码中看到的那样，我决定为每个区域制作一个新图表。为了使它们更加同步，我对 chartOptions 做了很多修改。您可以在下面看到更改。

图表选项： 

chartOptions: {
    colors: [
      this.school.color,
      this.adjustColor(this.school.color, 40),
      this.adjustColor(this.school.color, 80),
      this.adjustColor(this.school.color, 120),
      this.adjustColor(this.school.color, 200),
      this.adjustColor(this.school.color, 280)
    ],
    chart: {
      type: "bar",
      height: "auto",
      stacked: true,
      toolbar: {
        tools: {
          download: false
        }
      }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: "70%"
      }
    },
    stroke: {
      width: 1,
      colors: ["black"]
    },
    grid: {
      padding: {
        top: -35,
        bottom: -20
      }
    },
    xaxis: {
      min: 0,
      max: 41,
      categories: [""],
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      position: "none"
    },
    legend: {
      show: false
    },
    tooltip: {
      theme: "light",
      x: {
        show: false
      }
    }
  }

推荐阅读