代码之家 › 专栏 › 技术社区 › joshmoto

图表.js多行在x轴上使用毫秒仅显示前2个数据点?

chart.js

0

joshmoto · 技术社区 · 6 年前

chartjs

见下面的小提琴。

http://jsfiddle.net/joshmoto/0odcemL7/

问题是,我为每个数据集设置了8个数据点,但是图形只为每个数据集输出2个点。

.

var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Engine Speed',
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      fill: false,
      data: [{
        t: new Date(0.37),
        y: 2640
      }, {
        t: new Date(0.85),
        y: 2560
      }, {
        t: new Date(1.33),
        y: 2560
      }, {
        t: new Date(1.78),
        y: 2560
      }, {
        t: new Date(2.23),
        y: 2680
      }, {
        t: new Date(2.7),
        y: 2920
      }, {
        t: new Date(3.16),
        y: 3200
      }, {
        t: new Date(3.63),
        y: 3520
      }]
    }, {
      label: 'Mass Air Flow - Sensor',
      backgroundColor: '#00FFFF',
      borderColor: '#00FFFF',
      fill: false,
      data: [{
        t: new Date(0.02),
        y: 19.58
      }, {
        t: new Date(0.45),
        y: 16.28
      }, {
        t: new Date(0.92),
        y: 8.56
      }, {
        t: new Date(1.39),
        y: 8.47
      }, {
        t: new Date(1.86),
        y: 23.36
      }, {
        t: new Date(2.33),
        y: 45.78
      }, {
        t: new Date(2.78),
        y: 56.03
      }, {
        t: new Date(3.23),
        y: 62.36
      }]
    }],

  },
  options: {
    scales: {
      // xAxes: [{
      //     type: 'time',
      //     displayFormats: {
      //         quarter: 'ss.SSS'
      //     },
      //     time: {
      //         unit: 'second'
      //     }
      // }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="container">
  <div class="col-12 mt-3 mb-3">

    <canvas id="log_chart" width="600" height="200"></canvas>

  </div>
</div>

基本上数据是这样工作的。。。

t 是 x

y 值的范围是0-5000

0 回复 | 直到 6 年前

1

Chris 6 年前

我认为你需要提供更多的信息给图表.js这样它就知道如何处理X轴了。在以前的项目中,我给了 labels 数据中的属性。

示例-

// document ready
(function ($) {

    var ctx = document.getElementById('log_chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8],
            datasets: [
              {
                  label: 'Engine Speed',
                  backgroundColor: '#ff0000',
                  borderColor: '#ff0000',
                  fill: false,
                  data: [2640,2560,2560,2560, 2680, 2920, 3200, 3520]
              },
              {
                label: 'Mass Air Flow - Sensor',
                backgroundColor: '#00FFFF',
                borderColor: '#00FFFF',
                fill: false,
                data: [19.58, 16.28, 8.56, 8.47, 23.36, 45.78, 56.03, 62.36]
              }
            ],
        },
        options: {
            scales: {
                yAxes: [{
                    stacked: false
                }],
            }
        }
    });



})(jQuery);

所以属性可以填充X轴,而数据集只是将原始数据绘制到图形上。使用这种数据集会遇到的问题是,传感器读数明显低于发动机转速,因此无法在图表上很好地表示出来。你必须想办法使这些数据正常化,这样才能正确地表示出来,例如,给质量空气流量传感器读数加一个乘法。

2

0

joshmoto 6 年前

type: linear; 删除了日期功能,只在 x t .

var ctx = document.getElementById('log_chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Engine Speed',
      backgroundColor: '#ff0000',
      borderColor: '#ff0000',
      fill: false,
      data: [{
        x: 0.37,
        y: 2640
      }, {
        x: 0.85,
        y: 2560
      }, {
        x: 1.33,
        y: 2560
      }, {
        x: 1.78,
        y: 2560
      }, {
        x: 2.23,
        y: 2680
      }, {
        x: 2.7,
        y: 2920
      }, {
        x: 3.16,
        y: 3200
      }, {
        x: 3.63,
        y: 3520
      }]
    }, {
      label: 'Mass Air Flow - Sensor',
      backgroundColor: '#00FFFF',
      borderColor: '#00FFFF',
      fill: false,
      data: [{
        x: 0.02,
        y: 19.58
      }, {
        x: 0.45,
        y: 16.28
      }, {
        x: 0.92,
        y: 8.56
      }, {
        x: 1.39,
        y: 8.47
      }, {
        x: 1.86,
        y: 23.36
      }, {
        x: 2.33,
        y: 45.78
      }, {
        x: 2.78,
        y: 56.03
      }, {
        x: 3.23,
        y: 62.36
      }]
    }],

  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js Time Scale"
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="container">
  <div class="col-12 mt-3 mb-3">

    <canvas id="log_chart" width="600" height="200"></canvas>

  </div>
</div>