为什么我的 chart.js 更改为对数时不能正确绘图？

Question

I have a chart that is pretty extensive, sometimes hundreds of plot points. The issue is that it displays fine when I have it set to default (linear) type:

 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>

but when i change it to logarithmic all the plot points are flattened to the left side:

 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>

I have tried to work through keeping it as linear and setting steps and it just isn't the result that I need. Any ideas?

Answer 1

I can propose a simple solution that works but didn't find the reason why your code is not working.

The data property of individual datasets for a line chart can be passed in two formats, number[] or Point[] . Point[] is useful in the following cases:

1. If the number of data points from individual datasets is different.
2. if x-values of data points from different datasets are different.

If you have a unique dataset, it's fine to use number[] and this is what you did.

I just tried the other approach and use Point[] now. I basically create an array of Point using Array.map() :

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

Please have a look at your amended code below.

 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>