Question

我正在使用chartJs创建折线图，方法是在X-Axis传递日期，在Y-Axis传递时间（mm：ss）。我不确定如何将chartJs与时间值一起使用。我尝试了与堆栈不同的解决方案，但在我的情况下均不起作用。

这是json文件

{"label":["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"],"time":["1:08","1:44","2:27","1:02"],"chart_data":"{\"label\":[\"08-Aug-2019\",\"11-Aug-2019\",\"22-Aug-2019\",\"25-Aug-2019\"],\"time\":[\"1:08\",\"1:44\",\"2:27\",\"1:02\"]}"}

这就是我要编写的代码

<div id="time_chart"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
    let sData = JSON.parse('<?php echo $chart_data; ?>');
    let time_ctx = $("#time-chart");

    //Line Chart
      var time_data = {
        labels: sData.label,
        datasets: [
          {
            label: sData.label,
            data: sData.time
          }
        ]
      };

      //options line chart
      var time_options = {
        responsive: true,
        title: {
          display: false
        },
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            type: 'time',
            time: {
              parser: 'm:s',
              unit: 'minute',
              unitStepSize: 2,
              min: '0:0',
              max: '30:00',
              displayFormats: {
                'seconds': 'm.s'
              }
            },
            ticks: {
              callback: function(value, index, values) {

                //Ticks reverse does not work with time axes so we have to revert in this callback
                if (values[values.length - index] != undefined) {
                   return moment(values[values.length - index].value).format('m.s');
                }
              }
            }
          }]
        }
      };

      var chart2 = new Chart(time_ctx, {
        type: "line",
        data: time_data,
        options: time_options
      });

</script>

这是我用这段代码得到的：

Answer 1

虽然我没有设法在x轴和y轴上都使用时间轴，但是我设法创建了一个具有定时x轴和线性y轴的解决方法。我解析您的时间，并以秒为单位返回时间（整数）。我使用此值显示您的时间，并将格式更改回mm：ss。希望这就是您想要的。我不确定您是否希望以这种方式使用轴（因为在您的代码中，您将y轴用作“时间”类型）。

PS：我的第一篇文章，请随时告诉我我可以改善的地方。

JSFiddle：https://jsfiddle.net/5837nmyo/

JSBin：https://jsbin.com/yadixolica/1/edit?html,js,output

.Cells(567, 3).Formula = str_f

使用带有时间数据的Chart js的折线图

1 个答案: