时间戳

首页 > 解决方案 > Chart.js Y 轴数据未呈现

javascript - Chart.js Y 轴数据未呈现

问题描述

单击某个点时，我尝试绘制的图表在工具提示中以正确的 x,y 值呈现，但这些点未正确绘制在 Y 轴上。这条线位于图表的底部。（见图）

在此处输入图像描述

我正在使用 data.push(data) 将超过 10000 个提取的 x,y 对附加到 data 属性。我已将此记录到控制台，并且由于工具提示显示了正确的 x、y 值对，我相信数据本身是可以的。我的代码如下所示。

window.onload = function(){
  var ctx = document.getElementById("myEmissionsPlot");
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      // labels: [30, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
      datasets: [{
            lineTension: 0.2,
            backgroundColor: "rgba(255,255,255, 0.05)",
            borderColor: colorList[0],
            pointRadius: 0.05,
            pointBackgroundColor: colorList[0],
            pointBorderColor: colorList[0],
            pointHoverRadius: 3,
            pointHoverBackgroundColor: colorList[0],
            pointHoverBorderColor: colorList[0],
            pointHitRadius: 10,
            pointBorderWidth: 2,
            data: [],
            spanGaps: true,
        }
      ]
    },
    options: {
      annotation:{
        annotations:[
          {         
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '0',
            xMax: '230',
            yMin: '50',
            yMax: '50.1',
            borderColor:'red'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '230',
            xMax: '230.5',
            yMin: '50',
            yMax: '57',
            borderColor:'red'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '230.5',
            xMax: '1000',
            yMin: '57',
            yMax: '57.1',
            borderColor:'red'
          },
          {         
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '0',
            xMax: '88',
            yMin: '40',
            yMax: '40.1',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '88',
            xMax: '88.1',
            yMin: '40.1',
            yMax: '43.5',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '88.1',
            xMax: '216',
            yMin: '43.5',
            yMax: '43.6',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '216',
            xMax: '216.5',
            yMin: '43.6',
            yMax: '46',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '216.1',
            xMax: '960',
            yMin: '46',
            yMax: '46.1',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '960',
            xMax: '960.5',
            yMin: '46.1',
            yMax: '54',
            borderColor:'green'
          },
          {
                        
            type: 'box',
            xScaleID: 'x-axis-0',
            yScaleID: 'y-axis-0',
            xMin: '960.5',
            xMax: '1000',
            yMin: '54',
            yMax: '54.1',
            borderColor:'green'
          }
        ],
        drawTime: 'beforeDatasetsDraw'
      },
      events: ['click'],
      // onClick: handleClick,
      maintainAspectRatio: false,
      layout: {
        padding: {
          left: 10,
          right: 25,
          top: 25,
          bottom: 0
        }
      },
      scales: {
        xAxes: [{
          type: 'logarithmic',
          gridLines: {
            display: true,
            drawBorder: false
          },
          ticks: {
            min: 30,
            max: 1000,
            callback: function(value){
              if(value == 30 || value == 40 || value==50 || value==60 || value==70 || value==80 || value==90 || value==100 || value==200 || value==300 || value==400 || value==500 || value==600 || value==700 || value==800 || value==900 || value == 1000){
                return value
              }
            }
          },
          scaleLabel:{
            display: true,
            labelString: 'Frequency (MHz)'
          }
        }],
        yAxes: [{
          type: 'linear',
          ticks: {
            min: 0,
            max: 80,
            padding: 10,
            callback: function(value) {
              return number_format(value);
            }
          },
          gridLines: {
            color: "rgb(234, 236, 244)",
            zeroLineColor: "rgb(234, 236, 244)",
            drawBorder: false,
            borderDash: [2],
            zeroLineBorderDash: [2]
          },
          scaleLabel:{
            display: true,
            labelString: 'Amplitude (dBuV/m)'
          }
        }],
      },
      legend: {
        display: false
      },
      // tooltips: {
      //   position: 'nearest',
      //   backgroundColor: "rgb(255,255,255)",
      //   bodyFontColor: "#858796",
      //   titleMarginBottom: 10,
      //   titleFontColor: '#6e707e',
      //   titleFontSize: 14,
      //   titleAlign: 'center',
      //   borderColor: '#dddfeb',
      //   borderWidth: 1,
      //   xPadding: 15,
      //   yPadding: 15,
      //   displayColors: false,
      //   intersect: true,
      //   mode: 'dataset',
      //   caretPadding: 10,
      //   callbacks: {
      //     title: function(tooltipItem, chart){
      //       freq = chart.datasets[tooltipItem[0].datasetIndex].label
      //       return freq + 'MHz'
      //     },
      //     label: function(tooltipItem) {
      //       return tooltipItem.xLabel + ': ' + tooltipItem.yLabel + 'dB';
      //     }
      //   }
      // }
    }
  });
  // function handleClick(evt){
  //   var activeElement = myLineChart.getElementAtEvent(evt);
  //   if (activeElement[0] == undefined){
  //     for (set in myLineChart.data.datasets){
  //       myLineChart.data.datasets[set].hidden = false
  //     }
  //   }
  //   else{
  //     for (set in myLineChart.data.datasets){
  //       if (myLineChart.data.datasets[set] != myLineChart.data.datasets[activeElement[0]._datasetIndex]){
  //         myLineChart.data.datasets[set].hidden = true
  //       }
  //     }
  //   }
  // }
  fetch('/api/data')
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    i = 0
    for (set in json){
      x = parseFloat(json[i]['x'])
      y = parseFloat(json[i]['y'])
      data = new Object
      data.x = x
      data.y = y
      // console.log(data)
      myLineChart.data.datasets[0].data.push(data)
      i = i + 1
    }
    }
  )
  myLineChart.update()
}

任何帮助是极大的赞赏！

编辑1：

console.log(json) 给出：

在此处输入图像描述

console.log(myLineChart.data.datasets 1 .data) 给出：

在此处输入图像描述

标签： javascriptchart.js

解决方案

您的代码中 JSON 数据的处理对我来说看起来很奇怪，并且可以改进。

由于fetch()发出异步请求，因此还要确保仅在数据处理并分配给dataset.data. 因此，移动myLineChart.update()到then()函数内部。

修改后的代码如下所示：

fetch('/api/data')
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    myLineChart.data.datasets[0].data = json.map(o => ({
      x: parseFloat(o['x']),
      y: parseFloat(o['y'])
    }));
    myLineChart.update();
  });

这可能无法解决您的问题，但这是消除可能的错误来源的第一步。

推荐阅读