繁体   English   中英

Chart.js:最后一点在折线图之外

Chart.js: last point is outside of the line chart

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

当我有一个包含大量数据的折线图时,例如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>
问题暂未有回复.您可以查看右边的相关问题.
1 折线图在Chart.js中的第一点之前绘制

我正在尝试绘制折线图和条形图。 每当我尝试绘制折线图(我尝试仅绘制折线图,​​同样的错误)时,都会在第一个点之前绘制一条线: 折线图 这是我第一次尝试Chart.js 2.0,我画的其他图表看起来很棒,除了这个...还有什么想法吗? 码: ...

2 Chart.js使用日期点创建折线图

我正在尝试构建仅包含点的折线图,该点代表按其他列分组的最大日期列表。 我已经建立了几个图表,但没有一个实现日期数据。 预期结果示例: x-数据将按字段分组的y-每个字段的最长时间 ...

3 Chart.js 中折线图的“点”位置

在 Chart.js 中,我使用了带有线数据集的条形图。 我想将折线图“POINT”定位在左侧(左对齐)。 目前它总是在中心。 任何提示,谢谢 var ctx = document.getElementById('myChart').getContext('2d'); var mixedChart ...

4 Chart.js简单折线图

我在角上使用简单的chart.js图有问题 HTML: 注意:页面中有一个引导容器,因此网格系统很好 打字稿 问题是,如果我可以进行此采样(数据只是虚拟的,它们将从API加载),我将得到此结果 那不是我所期望的。 4分中只有2分(从10分到200分) ...

5 使用 Chart.js 的折线图

我有两个表,我在执行 mysql 查询后得到的表(表 1 是 pl_pl,表 2 是 act_act),格式如下: 我必须使用带有公共 x 轴label的折线图标记act_hrs和pl_hrs所有点。 我为此尝试了以下 javascript 代码: javascript代码: 我为此使用 ...

7 chart.js折线图中最后3h个数据值的总和

我在chart.js中有一个问题,我有一个线图,y轴是整数类型,x轴是时间类型,以小时为单位。 我有一个包含10个数据点的数据集。 现在我只想要最近3个小时的总和。 我知道,如何对所有这些求和,而不是选择特定的求和,而无需编写一些大代码。 那么,chart.js或moment.j ...

10 CSS在Chart.js的折线图中添加一个点

我正在尝试创建一个百分位数图表,即具有一些与每个百分位数相对应的线的图表。 给定用户输入,我想在图表中用点显示他们的标记。 因此,基本上,我的问题是:是否可以在多条折线图中放置一个点? 如果是这样,我该怎么办? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM