Есть ли способ использовать линейчатую диаграмму с накоплением с Apexcharts (или аналогичными) и разделить данные?

Я бы хотел, чтобы мои данные были следующими:

first_stacked_bar: (Ярлык) Math | (Данные, все курсы математики, которые я прошел) 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/#, где каждая первая запись данных используется как «Морской спрайт»).

В настоящий момент я разбиваю каждую строку на отдельную диаграмму, которая ~ работает, но не очень хорошо или с хорошими результатами.

Если у кого-то есть пакет диаграмм, который можно порекомендовать, или есть идеи, которыми можно поделиться, я был бы очень рад. Я использую Vue.js для своего проекта, поэтому, если он также работает с Vue, это было бы здорово.


javascript vue.js charts stacked-chart apexcharts
person Sofia Johansson    schedule 25.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Составной граф без отношений

Итак, я наконец заставил его работать с Apexcharts.


КОД:

EducationCharts

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

EducationChart

<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:

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:

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
      }
    }
  }
person Sofia Johansson    schedule 26.04.2020