Question

我需要绘制一些信息，其中X-axis是时间，而Y-axis是数值。结构类似于下表，

Name   Date   Result
N1     9:00   88
N1     9:10   84
N1     9:16   83
N1     9:23   83
N1     9:29   85
N2     9:03   87
N2     9:07   87
N2     9:18   87
N2     9:25   86
N2     9:29   86

因此，在此示例中，我需要的是两条独立的线，每条线都处理它的数据。

为了显示此信息，我正在使用chart.js。我的第一个想法是使用scatter类型图，但这是不可能的，因为它仅适用于数值。因此，我考虑过使用line类型图，但是问题是默认情况下您只能定义一个label以及如何看到我需要每个信息都是独立的，因为它们没有不必匹配小时数。

是否可以添加另一个label？我试图定义两个列表，但它不起作用，我也不知道如何处理。

let ctx = document.getElementById("my_chart").getContext("2d");

my_chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            ['9:00','9:10','9:16','9:23','9:29'],
            ['9:03','9:07','9:18','9:25','9:29']
        ],
        datasets: [{ 
            data: [88,84,83,83,85],
            label: "N1",
            borderColor: "#8e5ea2",
            fill: false
        }, { 
            data: [87,87,87,86,86],
            label: "N2",
            borderColor: "#c45850",
            fill: false
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Info'
        }
    }
});

编辑：借助@alonas和@HeadhunterKev进行的修改

这是我现在拥有的，无法正常工作，我想格式是错误的，但我不知道是什么。也许我需要几秒钟？也许这是一个愚蠢的问题，但我迷失了这个...

var sData = {
    datasets: [{
        label: 'Dataset1',
        data: [{
            x: '09:00',
            y: 88
        }, {
            x: '09:10',
            y: 89
        }, {
            x: '09:13',
            y: 86
        }, {
            x: '09:23',
            y: 86
        }, {
            x: '09:26',
            y: 85
        }, {
            x: '09:29',
            y: 83
        }]
    }, {
        label: 'Dataset2',
        data: [{
            x: '09:02',
            y: 88
        }, {
            x: '09:13',
            y: 89
        }, {
            x: '09:14',
            y: 86
        }, {
            x: '09:20',
            y: 86
        }, {
            x: '09:24',
            y: 85
        }, {
            x: '09:29',
            y: 83
        }]
    }]
}

sData.datasets[0].data = formatData(sData.datasets[0].data)
sData.datasets[1].data = formatData(sData.datasets[1].data)

function formatData(oldData) {
    var newData = []
    for (var i = 0; i < oldData.length; i++) {
        var currentData = {}
        currentData.x = moment(oldData[i].x, "hh:mm").format('HH:mm')
        currentData.y = oldData[i].y
        newData.push(currentData)
    }
    return newData
  }

var data = sData

var options = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'time',
        }]
    },
    tooltips: {
        callbacks: {
            title: function(tooltipItem, data){
                return moment(tooltipItem[0].label).format('hh:mm')
            }
        }
    }
}

var ctx = document.getElementById('bateria_graf');
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

有人可以帮我吗？非常感谢。

Answer 1

您可以将数据作为x，y的列表提供：

datasets: [{ 
        data: [{y:88,x:`${timestamp of 9:00}` },...],
        ...
    }, { 
        data: [{y:87, x:`${timestamp of 9:03}`},...],
        ...
    }]

像这里https://www.chartjs.org/docs/latest/charts/line.html#point

然后在选项中定义如何将x值（时间戳）显示为小时：分钟

{
   scales: {
      xAxes: [{
         ticks: {
            callback = (label, index, labels) => {
               return moment.unix(label).format('HH:mm');
            }
         }
      }]
   }
}

在折线图中添加其他标签-Chart.js

1 个答案: