时间戳

首页 > 解决方案 > 具有两个 y 轴的混合图（线/条）不会在第二轴上显示数据

javascript - 具有两个 y 轴的混合图（线/条）不会在第二轴上显示数据

问题描述

如标题所述。我正在尝试使用 chart.js-2 创建图表。该图应该显示湿度和温度的数据对。在 X 轴上，我显示时间。我有两个 Y 轴 - 一个用于温度，另一个用于湿度。即使数据出现在工具提示中，也没有说明。

数据以这种格式提供：时间戳；Sensor_ID；温度；湿度；2019-06-29 11:13:56;1;24.60;51.80;

这是一个“工作”示例的小提琴： https ://jsfiddle.net/sHooP_/ky4nha7L/22/

data: {
        datasets: [{
        type: 'bar',
        yAxisID: 'Humidity',
        label: 'Humidity',
        backgroundColor: window.chartColors.blue,
        data: objDataset_Humid_Filtered,
        borderColor: 'blue',
        borderWidth: 2,
        fill: true,
      }, {
        type: 'line',
        yAxisID: 'Temperature',
        label: 'Temperature',
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: objDataset_Temp_Filtered,
        fill: false
      }]
    }´

感谢您的任何答案！我开始对此感到沮丧。

我也很确定我的编码不是很干净（初学者），所以如果您碰巧有任何提示，请随意！

最好的问候，大卫

标签： javascriptchart.js

解决方案

Chart.js 允许您将一条线添加到条形图，但不能将条添加到折线图。所以你需要将图表类型设置为条形，例如：

var config = {
  type: 'line', // <-- change to 'bar'!
  ...

推荐阅读