如果不是很完美,请原谅我的英语。

当我有一个包含大量数据的折线图时,例如6个月中每天1个点,则最后一个点没有标签,并且该点不在图表中。 此后,要恢复正常图表,我必须设置一个较小的日期范围,例如2个月,然后我可以将其范围扩大到错误出现之前的5或6个月。

正常点: https : //i.gyazo.com/b4e88afc7c94adfbeb86bf6543900d4b.jpg

外出且没有标签: https : //i.gyazo.com/f782e5b752ca87340ebaabe32c1e88d4.jpg

您是否曾经遇到过此错误,并且您知道我该如何解决?

Chart.vue:

<template>
  <div class="cdr-chart" style="height: 500px">
    <cdr-loader v-if="loading" :size="50"></codeur-loader>
    <div class="d-flex justify-content-between">
      <div class="col-md-3">
        <p class="m-0 small"><strong>Début le</strong></p>
        <input type="text" class="form-control form-control-sm admin-datepicker" :id="`${this.name}__starts_at`">
      </div>
      <div class="col-md-3">
        <p class="m-0 small"><strong>Fin le</strong></p>
        <input type="text" class="form-control form-control-sm admin-datepicker" :id="`${this.name}__ends_at`">
      </div>
      <div class="col-md-3 mt-3 mb-2">
        <div class="input-group input-group-sm">
          <span class="input-group-addon">
            <input type="checkbox" v-model="checked" :id="`${this.name}_checkbox`">
          </span>
        <label :for="`${this.name}_checkbox`" class="form-control">Par semaine</label>
        </div>
      </div>
    </div>
    <canvas height="300"></canvas>
  </div>
</template>

<script>
/* eslint-disable func-names */
import Chart from 'chart.js';
import CdrLoader from '../../components/CdrLoader.vue';
import moment from 'moment';

const FETCH_URL = '/admin/dashboards/fetch_data';

const colors = {
  backgroundColor: [
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 99, 132, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
  ],
  borderColor: [
    'rgba(54, 162, 235, 1)',
    'rgba(255,99,132,1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
  ],
  borderWidth: 1,
};

export default {
  components: { CdrLoader },
  props: {
    name: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'line',
    },
  },
  data() {
    return {
      loading: true,
      datasets: null,
      chart: null,
      starts_at: null,
      ends_at: null,
      checked: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      const self = this;
      const startsAtDp = this.$el.querySelector(`#${this.name}__starts_at`);
      const endsAtDp = this.$el.querySelector(`#${this.name}__ends_at`);
      const checked = this.$el.querySelector(`#${this.name}_checkbox`);

      $(startsAtDp).pickadate({
        format: 'yyyy-mm-dd',
        onSet(context) {
          if (!context.select) return false;
          self.starts_at = moment(context.select).format('YYYY-MM-DD');
        },
      });

      $(endsAtDp).pickadate({
        format: 'yyyy-mm-dd',
        onSet(context) {
          if (!context.select) return false;
          self.ends_at = moment(context.select).format('YYYY-MM-DD');
        },
      });
      this.loadChart();
    });
  },
  methods: {
    loadChart() {
      this.loading = true;
      this.$http.get(`${FETCH_URL}?data=${this.name}&starts_at=${this.starts_at}&ends_at=${this.ends_at}&checked=${this.checked}`).then((response) => {
        this.datasets = response.body.datasets;
        if (this.chart) {
          this.updateChart();
        } else {
          this.initChart();
        }
        this.loading = false;
      });
    },
    initChart() {
      const ctx = this.$el.querySelector('canvas').getContext('2d');

      const datasets = [];

      this.datasets.charts.forEach((chart, index) => {
        datasets.push({
          backgroundColor: chart.background_color ? chart.background_color : colors.backgroundColor[index],
          borderColor: chart.border_color ? chart.border_color : colors.borderColor[index],
          borderWidth: 1,
          data: chart.data,
          type: chart.type,
          label: chart.label,
        });
      });

      this.chart = new Chart(ctx, {
        type: this.type,
        data: {
          labels: this.datasets.labels,
          datasets,
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
              },
            }]
          },
        },
      });
    },
    updateChart() {

      const datasets = [];

      this.datasets.charts.forEach((chart, index) => {
        datasets.push({
          backgroundColor: chart.background_color ? chart.background_color : colors.backgroundColor[index],
          borderColor: chart.border_color ? chart.border_color : colors.borderColor[index],
          borderWidth: 1,
          data: chart.data,
          type: chart.type,
          label: chart.label,
        });
      });

      this.chart.data = {
        labels: this.datasets.labels,
        datasets,
      };

      this.chart.update();
    },
  },
  watch: {
    starts_at(newStartsAt) {
      this.loadChart();
    },
    ends_at() {
      this.loadChart();
    },
    checked() {
      this.loadChart();
    },
  }
};
</script>

<style lang="scss" scoped>
  .cdr-chart {
    width: 100%;
    canvas {
      height: 100%;
    }
  }
</style>

  ask by escanxr translate from so

本文未有回复,本站智能推荐:

1回复

如何将渐变背景添加到折线图[vue-chart.js]

如何向折线图添加渐变背景颜色,我将数据作为道具传递。 这是我的 LineChart.vue 组件: 这是 Home.vue 中的图表数据初始化: 如何在折线图的背景中使用渐变而不是纯色?
1回复

Chart.js厚标签被三个点替换

如何显示全厚标签? 它总是被切断并替换为 3 个点。 我一直在尝试从https://www.chartjs.org/docs/master/axes/index使用填充和类似的各种选项,但我找不到这个。 有完整的日期数据。
1回复

如何为Chart.js日期标签设置语言环境?

我有一个Vue组件,该组件使用Chart.js呈现不同的图表。 一切正常,但我无法在X轴上为日期标签设置语言环境。 我试图在我的vue组件的脚本部分的顶部定义矩点语言环境,但是没有带来任何结果。 ^但...尝试之后,我在X轴上看到:'Jul 2013','Aug 2013',但没有'И
1回复

Vue.js中的Chart.js注释在data()中定义时中断

我在 Vue.js 应用程序中使用chartjs-plugin-annotations时遇到问题我们已经成功地将 ChartJS 图表嵌入到我们的 Vue 应用程序中,并使用组件的data ()部分中定义的图表config 。 但是,当我们添加了chartjs-plugin-annotation插件
1回复

在chart.js中绘制折线图仅在值更改时放置点

我正在使用chart.js在我的页面中使用图表我在x轴上的日期与我的y轴值(成本)有关。 我想保持折线图继续其值,直到有变化并为此编码。 这是输出 在此标记为值是否相同我绘制了点。 我可以选择删除所有点,但如果值与之前相同,我想删除点。(没有变化)。 我想知道这是否可行。 如果
1回复

使用Chart.js将折线图上的“点”更改为甜甜圈

我正在寻找更多自定义Chart.js折线图上的点。 我想要的是能够在这些点上设置“边界半径”,而不是实心圆。 这样,这些点将更多地显示为甜甜圈。 (边框为空心/白色/彩色中心)。 有内置的方法吗? 如果不是,是否有一种方法可以扩展LineChart函数以允许这样做? 我想到的最简
1回复

Chart.js未显示折线图。我究竟做错了什么?

我正在尝试显示此折线图,但它不起作用; 我应该在 2 个月的时间间隔内用 covid 数据的结果制作一个图表,所以在 x assys 中会有几天,在 y assys 上会有病例数和死亡数。
1回复

Chart.js折线图的0线样式

我有一个用Chart.js编写的带有正负值的折线图。 我正在尝试为平行于X轴的0线提供一种颜色,而不影响其他图表元素。 我的代码: 我试过了: 但这只是给轴着色,而不是0线。 如何为0线上色?