在chartjs笛卡尔时间轴上的特定时间位置创建刻度

时间:2018-11-21 16:08:46

标签: javascript chart.js vue-chartjs

我创建了一个实时图表,通过添加一个新值并删除一个旧值来每10秒更新一次。

Image of the realtime chart

我对时间轴的选定刻度不满意。每10分钟就可以了,但是我更喜欢15:5016:0016:10之类的值。我环顾了documentation时间轴,但没有发现任何有希望的东西。 我对xAxes的定义如下:

    xAxes: [
        {
          gridLines: {
            display: true
          },
          type: "time",
          time: {
            unit: "minute",
            unitStepSize: 10,
            displayFormats: {
              minute: "HH:mm"
            }
          },
          ticks: {
            min: 0,
            max: this.datapoints.length,
            autoSkip: true,
            maxTicksLimit: 10
          }
        }
      ]

我试图遍历数据集并找到“第一时间”对象,并将该对象设置为我的ticks.min对象。但这行不通。

1 个答案:

答案 0 :(得分:0)

好的,我找到了。该属性位于time属性中:

time: {
  unit: "minute",
  unitStepSize: 10,
  displayFormats: {
    minute: "HH:mm"
  },
  min: firstprettyTime, // <- moment js object
},

对此guy's answer表示赞赏。