为什么我的chart.js更改为对数后无法正确绘制?

问题描述 投票:0回答:1

我有一个非常广泛的图表,有时有数百个绘图点。问题是,当我将其设置为默认(线性)类型时,它可以正常显示:

var labels = [100000,100069,100334,100342,100417,129547,129637,129980,129999,130010,130057,130154,130166,130442,130461,159596,159634,159693,159749,159812,160001,160083,160329,160361,160372,160444,160500,199998,200013,200030,200056,200067,200078,200098,200122,200163,200367,200417,200440,249557,249768,249890,249923,249943,250001,250015,250034,250099,250228,250355,250387,319602,319632,319707,319885,319948,319972,320000,320005,320019,320277,320399,320479,399637,399685,399727,399731,399744,399844,399887,399901,400000,400004,400085,400159,499615,499671,499675,499890,499995,499998,499999,500077,500080,500103,500128,500306,629817,629985,629987,629991,629993,629996,629999,630000,630002,630177,630317,789576,789587,789994,789997,789998,789999,790000,790009,790056,790151,790251,999745,999996,999997,999998,999999,1000000,1300000,1600000,2000000,2500000,3200000,4000000,5000000,6300000,7900000,10000000,13000000,16000000,20000000,25000000,30000000,40000000,50000000,70000000,79400000,100000000,126000000,158000000,180000000,200000000,316000000,398000000,501000000,631000000,794000000,1000000000,2000000000,2400000000,3600000000,4900000000,5000000000,5900000000,6500000000,7000000000,8000000000,10000000000,15000000000,18000000000,20000000000,25000000000,30000000000,35000000000,40000000000];
var dBs = [52.886,52.896,52.935,52.936,52.947,57.19,57.203,57.253,57.256,57.258,57.265,57.261,57.261,57.25,57.249,56.091,56.09,56.087,56.085,56.083,56.075,56.07,56.055,56.053,56.054,56.062,56.068,60.254,60.256,60.257,60.26,60.262,60.263,60.265,60.268,60.272,60.274,60.274,60.274,60.71,60.712,60.713,60.713,60.715,60.719,60.72,60.721,60.725,60.733,60.741,60.743,65.011,65.013,65.018,65.029,65.033,65.034,65.035,65.035,65.035,65.04,65.043,65.044,66.61,66.611,66.612,66.612,66.612,66.614,66.615,66.615,66.618,66.618,66.62,66.621,68.6,68.601,68.602,68.606,68.608,68.608,68.608,68.609,68.609,68.609,68.609,68.611,67.968,67.967,67.967,67.967,67.967,67.967,67.967,67.967,67.967,67.971,67.974,71.441,71.441,71.449,71.449,71.449,71.449,71.449,71.449,71.45,71.452,71.453,75.083,75.084,75.084,75.084,75.084,75.084,75.183,70.581,76.635,75.944,73.984,66.849,73.645,80.024,75.646,78.859,85.134,85.876,80.615,80.01,85,79,78,75,62.188,62.728,65.358,75.284,69.098,76.87,80.797,81.103,77.744,77.868,78.514,78.927,75.915,74.093,87.656,85.332,85.204,81.294,82.458,82.045,83.241,77.861,83.363,71.05,61.6,62.5,75.7,67.7,66.7];
var ctx = document.getElementById("myChart").getContext('2d');
ctx.height = 400;
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      data: dBs
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        //type: 'logarithmic',
      }]
    },
     
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

但是当我将其更改为对数时,所有绘图点均向左展平:

var labels = [100000,100069,100334,100342,100417,129547,129637,129980,129999,130010,130057,130154,130166,130442,130461,159596,159634,159693,159749,159812,160001,160083,160329,160361,160372,160444,160500,199998,200013,200030,200056,200067,200078,200098,200122,200163,200367,200417,200440,249557,249768,249890,249923,249943,250001,250015,250034,250099,250228,250355,250387,319602,319632,319707,319885,319948,319972,320000,320005,320019,320277,320399,320479,399637,399685,399727,399731,399744,399844,399887,399901,400000,400004,400085,400159,499615,499671,499675,499890,499995,499998,499999,500077,500080,500103,500128,500306,629817,629985,629987,629991,629993,629996,629999,630000,630002,630177,630317,789576,789587,789994,789997,789998,789999,790000,790009,790056,790151,790251,999745,999996,999997,999998,999999,1000000,1300000,1600000,2000000,2500000,3200000,4000000,5000000,6300000,7900000,10000000,13000000,16000000,20000000,25000000,30000000,40000000,50000000,70000000,79400000,100000000,126000000,158000000,180000000,200000000,316000000,398000000,501000000,631000000,794000000,1000000000,2000000000,2400000000,3600000000,4900000000,5000000000,5900000000,6500000000,7000000000,8000000000,10000000000,15000000000,18000000000,20000000000,25000000000,30000000000,35000000000,40000000000];
var dBs = [52.886,52.896,52.935,52.936,52.947,57.19,57.203,57.253,57.256,57.258,57.265,57.261,57.261,57.25,57.249,56.091,56.09,56.087,56.085,56.083,56.075,56.07,56.055,56.053,56.054,56.062,56.068,60.254,60.256,60.257,60.26,60.262,60.263,60.265,60.268,60.272,60.274,60.274,60.274,60.71,60.712,60.713,60.713,60.715,60.719,60.72,60.721,60.725,60.733,60.741,60.743,65.011,65.013,65.018,65.029,65.033,65.034,65.035,65.035,65.035,65.04,65.043,65.044,66.61,66.611,66.612,66.612,66.612,66.614,66.615,66.615,66.618,66.618,66.62,66.621,68.6,68.601,68.602,68.606,68.608,68.608,68.608,68.609,68.609,68.609,68.609,68.611,67.968,67.967,67.967,67.967,67.967,67.967,67.967,67.967,67.967,67.971,67.974,71.441,71.441,71.449,71.449,71.449,71.449,71.449,71.449,71.45,71.452,71.453,75.083,75.084,75.084,75.084,75.084,75.084,75.183,70.581,76.635,75.944,73.984,66.849,73.645,80.024,75.646,78.859,85.134,85.876,80.615,80.01,85,79,78,75,62.188,62.728,65.358,75.284,69.098,76.87,80.797,81.103,77.744,77.868,78.514,78.927,75.915,74.093,87.656,85.332,85.204,81.294,82.458,82.045,83.241,77.861,83.363,71.05,61.6,62.5,75.7,67.7,66.7];
var ctx = document.getElementById("myChart2").getContext('2d');
ctx.height = 400;
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      data: dBs
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        type: 'logarithmic',
      }]
    },
     
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart2" width="400" height="400"></canvas>

我已经尝试通过保持线性和设置步骤来工作,但这并不是我需要的结果。有什么想法吗?

javascript chart.js
1个回答
0
投票

我可以提出一个可行的简单解决方案,但是没有找到您的代码无法正常工作的原因。

折线图的各个数据集的data属性可以以number[]number[]两种格式传递。 Point[]在以下情况下很有用:

  1. 如果各个数据集中的数据点数不同。
  2. 如果来自不同数据集的数据点的x值不同。

如果您有唯一的数据集,可以使用Point[],这就是您所做的。

我刚刚尝试了另一种方法,现在使用Point[]。我基本上是使用number[]创建一个Point[]数组:

Point

请在下面查看您的修改后的代码。

Array.map()
Array.map()
© www.soinside.com 2019 - 2024. All rights reserved.