Question

如果您有更好的解决方案（也许是针对此问题的D3解决方案）：我们将非常感谢您的回答！

我是Chart.js的新手，尽管一遍又一遍地阅读Chart.js和Moment.js的文档，但我似乎并不具备创建图表所需的技能I＆＃ 39;我想创造。

那就是说，我有两个数组：一个用于y-axis，另一个用于x-axis。

您可以查看，修改，分叉以及所有 here on codepen 。

看起来像这样：

现在看起来很好，但就像我说的那样，我似乎没有Moment.js技能将一秒钟的那些变换为一个好看的人： 2:31.70 < / strong> (mm:ss:SS)或 23.76 (ss:SS)或 1:58.43.20 (HH:mm:ss:SS)。

在hundreths被转换到正常时间之后，人类可读。这个日期也不太好看。我希望能够将此日期转换为本地语言和自定义格式。您可以在答案中粘贴您的codepen链接。或者，如果您有任何其他好的例子，那也非常受欢迎！

HTML：

<canvas id="myChart" width="auto" height="100"></canvas>

JavaScript的：

var ctx = document.getElementById("myChart").getContext("2d"); var myLineChart = new Chart(ctx, { type: "line", data: { labels: [ // x-axis array containing dates as String in YYYY-MM-DD format // e.g. 2009-04-11 (April 11, 2009) ], datasets: [ { label: "time", backgroundColor: "transparent", borderColor: "#0088d4", data: [ // y-axis array containing times as int in one hundredth of a second // e.g.: 15170 (2 minutes, 31 seconds and 70 hundreth of a second) ] } ] }, options: { elements: { line: { tension: 0 } }, scales: { yAxes: [ { ticks: { stepSize: 1, callback: function(tickValue, index, ticks) { if (!(index % parseInt(ticks.length / 5))) { return tickValue; } } } } ] } } });

Answer 1

您可以创建duration并使用moment-duration-format插件。

由于输入的时间是秒，您可以使用moment.duration：

Moment.js也有持续时间对象。如果将时刻定义为单个时间点，则将持续时间定义为时间长度。

您可以使用moment.duration(tickValue/100, 'seconds')为您的值创建持续时间。然后，您可以使用moment-duration-format将60秒转换为01:00.00

之类的字符串

这是Moment.js JavaScript日期库的插件，用于为时刻持续时间添加全面的格式。

使用时间持续时间格式，您可以将format()方法用于持续时间对象。在您的情况下，您可以使用'mm:ss.SS'代表mm代表分钟，ss代表秒，SS代表毫秒。

由于您希望输出00:23.80而不是23.80，因此您可以使用{ trim: false }选项。

因此，要更改y轴的显示值，您的回调可能如下所示：

callback: function(tickValue, index, ticks) {
  if (!(index % parseInt(ticks.length / 5))) {
    return moment.duration(tickValue/100, 's').format('mm:ss.SS');
  }
}

关于日期的评论后更新：您可以使用format()时刻将2011-04-11转换为april 14, 2011：

moment('2011-04-11').format('MMMM DD, YYYY');

您只需使用moment(String)解析您的输入（因为它与已知的ISO 8601格式相匹配），然后使用format()使用MMMM作为月份名称，DD表示日期一年中的月份和YYYY。

Here我更新的代码集具有以下代码段的相同代码：

var ctx = document.getElementById("myChart").getContext("2d");

var myLineChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
      moment("2009-04-11").format('MMMM DD, YYYY'),
      moment("2009-05-16").format('MMMM DD, YYYY'),
      moment("2009-10-10").format('MMMM DD, YYYY'),
      moment("2009-11-28").format('MMMM DD, YYYY'),
      moment("2010-02-14").format('MMMM DD, YYYY'),
      moment("2010-03-13").format('MMMM DD, YYYY'),
      moment("2010-04-17").format('MMMM DD, YYYY'),
      moment("2010-12-18").format('MMMM DD, YYYY'),
      moment("2011-01-29").format('MMMM DD, YYYY'),
      moment("2011-03-12").format('MMMM DD, YYYY'),
      moment("2011-03-27").format('MMMM DD, YYYY'),
      moment("2011-05-15").format('MMMM DD, YYYY'),
      moment("2011-10-08").format('MMMM DD, YYYY'),
      moment("2011-11-27").format('MMMM DD, YYYY'),
      moment("2011-12-17").format('MMMM DD, YYYY'),
      moment("2012-03-10").format('MMMM DD, YYYY'),
      moment("2012-05-13").format('MMMM DD, YYYY'),
      moment("2012-10-07").format('MMMM DD, YYYY'),
      moment("2012-11-03").format('MMMM DD, YYYY'),
      moment("2012-11-10").format('MMMM DD, YYYY'),
      moment("2013-05-11").format('MMMM DD, YYYY'),
      moment("2013-10-12").format('MMMM DD, YYYY'),
      moment("2013-11-09").format('MMMM DD, YYYY'),
      moment("2014-01-11").format('MMMM DD, YYYY'),
      moment("2014-11-07").format('MMMM DD, YYYY'),
      moment("2014-11-15").format('MMMM DD, YYYY'),
      moment("2015-03-07").format('MMMM DD, YYYY'),
      moment("2015-04-12").format('MMMM DD, YYYY'),
      moment("2015-11-14").format('MMMM DD, YYYY'),
      moment("2016-11-12").format('MMMM DD, YYYY'),
      moment("2016-12-11").format('MMMM DD, YYYY'),
      moment("2017-01-08").format('MMMM DD, YYYY')
    ],
    datasets: [
      {
        label: "time",
        backgroundColor: "transparent",
        borderColor: "#0088d4",
        data: [
          15170,
          15026,
          15209,
          14335,
          14293,
          14725,
          14560,
          13511,
          13422,
          13230,
          13795,
          12830,
          13126,
          12988,
          12950,
          12750,
          12702,
          12395,
          12534,
          12276,
          12440,
          12462,
          12365,
          12465,
          12021,
          11976,
          12050,
          12016,
          11984,
          11972,
          11717,
          11995
        ]
      }
    ]
  },
  options: {
    elements: {
      line: {
        tension: 0
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            stepSize: 1,
            callback: function(tickValue, index, ticks) {
              if (!(index % parseInt(ticks.length / 5))) {
                return moment.duration(tickValue/100, 's').format('mm:ss.SS',{ trim: false });
              }
            }
          }
        }
      ]
    }
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  padding: 2rem 0;
}

.container {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 970px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

<section>
  <div class="container">
    <h2>times chart</h2>
  </div>
  <div class="container">
    <canvas id="myChart" width="auto" height="100"></canvas>
  </div>
</section>

JavaScript - 转换日期和时间（Chart.js和Moment.js）

1 个答案: