为什么Chart.js(类型:时间)显示错误的标签

时间:2019-06-11 05:38:47

标签: javascript angular chart.js chart.js2

Chart.js不想显示第一个月的标签,除了框架会显示不存在的第一个月的标签。

我在Angular 7中使用时间类型为ng2-charts的图表。在显示的图表中,我有3个月的域名统计信息。我检查数据集及其实际存在的3个周期,没有错误。 在图形中,我看到未显示第一个月的标签,但在这些图表中添加了数据集中不存在的9月标签。数据点显示,仅未显示标签。 Chart 当我尝试完全像第一个月的图表一样设置x轴的最小值时,请显示其标签,但图表不是从x轴“零”开始绘制。 我认为我的内置函数会出现一些错误,但是当我关闭所有这些选项时,问题仍然存在。 Chart with min of x-axis

选项(我禁用了功能)

let chartOptions = {
      type: 'line',
      options: {
        customBlock: {
          normalizeNumbers: Formatter.normalizeNumber,
          monthsLocale: this.months,
          groupMetric: this.groupMetric,
          measureUnits: this.measureUnits,
          tooltip: this.toolTip
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            usePointStyle: true,
            fontFamily: "'Roboto', Arial, sans-serif",
            fontStyle: "bold",
            fontColor: 'white',
            boxWidth: 8,
            padding: 20,
            // generateLabels: this.generateLegendLabels,

          },
        },
        scales: {
          yAxes: [{
            id: 'Groups',
            type: 'linear',
            position: 'left',
            // scaleLabel: this.leftLabelOptions,
            ticks: {
              min: 0,
              padding: 10,
              fontColor: 'white',
              fontSize: 10,
              // callback: this.generateDataYTicks
            },
            gridLines: {
              color: '#3C2D4C',
              borderDash: [5, 5],
              drawTicks: false
            }
          }, {
            id: 'Infopole',
            type: 'linear',
            position: 'right',
            // scaleLabel: this.rightLabelOptions,
            gridLines: {
              color: '#3C2D4C',
              display: false,
              drawBorder: true,
            },
            ticks: {
              min: 0,
              fontColor: 'white',
              fontSize: 10,
              // callback: this.generateInfopoleYTicks
            }
          }],
          xAxes: [
            {
              display: true,
              mirror: true,
              type: 'time',
              time: {
                unit: 'month',
                source: 'data'
              },
              distribution: 'series',
              ticks: {
                fontColor: 'white',
                fontSize: 10,
                // callback: this.generateXTicks
              }
            }
          ]
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        tooltips: {
          enabled: false,
          // custom: this.generateTooltip
        }
      }
    };

    return chartOptions;

  }

我以下一种格式添加数据

dataset = {
  label: "string",
  data: [
    {x: new Date(timestamp), y: number}, ...
  ]
}

0 个答案:

没有答案