Есть ли способ использовать гистограмму с накоплением с Apexcharts (или аналогичными) и разделить данные? - PullRequest
Новая
       128

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

0 голосов
/ 26 апреля 2020

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

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, это было бы здорово.

1 Ответ

0 голосов
/ 26 апреля 2020

Stacked graph without relations

Итак, я наконец-то заставил его работать с 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;
    }

Возможно, есть более эффективные способы решения этой проблемы, но, как видно из кода выше, я решил создать новую диаграмму для каждой области. Чтобы сделать их более синхронизированными c я довольно сильно изменил 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
      }
    }
  }
...