Почему мой график. js отображается неправильно при изменении на логарифмический c? - PullRequest
Новая
       9

Почему мой график. js отображается неправильно при изменении на логарифмический c?

1 голос
/ 09 апреля 2020

У меня довольно обширный график, иногда сотни точек графика. Проблема в том, что он отображается нормально, когда он установлен по умолчанию (линейный) тип: 

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>

, но когда я изменяю его на логарифмическое c, все точки графика сглаживаются с левой стороны: 

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>

Я пытался работать как линейный и настраивать шаги, и это просто не тот результат, который мне нужен. Есть идеи?

1 Ответ

2 голосов
/ 10 апреля 2020

Я могу предложить простое решение, которое работает, но не нашел причину, по которой ваш код не работает.

Свойство data отдельных наборов данных для линейного графика может быть передано в двух форматах, number[] или Point[]. Point[] полезно в следующих случаях:

  1. Если количество точек данных из отдельных наборов данных отличается.
  2. , если значения x точек данных из разных наборов данных различны.

Если у вас есть уникальный набор данных, то можно использовать number[], и это то, что вы сделали.

Я только что попробовал другой подход и сейчас использую Point[]. Я в основном создаю массив Point, используя Array.map(): 

labels.map((label, index) => ({ x: label, y: dBs[index] }))

Пожалуйста, взгляните на ваш исправленный код ниже. 

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');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: labels.map((label, index) => ({ x: label, y: dBs[index] }))
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        type: 'logarithmic',
      }]
    }     
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart2" height="200"></canvas>
...