Chart.js条形图不会从零开始作为最小值

hc8w905p  于 2023-02-12  发布在  Chart.js
关注(0)|答案(2)|浏览(259)

我正在使用Chart.js显示一个折线图,它工作正常,只是我希望y轴从0开始作为最小值。现在,y轴从显示的数据中的任何最小值开始。我希望它总是从零开始显示。
这是我正在使用的代码(它可以工作,只是不从y轴上的0开始):

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $.ajax({
  4. url : "Get data from here",
  5. type : "GET",
  6. success : function(data){
  7. console.log(data);
  8. var userid = [];
  9. var viewers = [];
  10. for(var i in data) {
  11. userid.push(data[i].date_time);
  12. viewers.push(data[i].viewers);
  13. }
  14. var chartdata =
  15. {
  16. labels: userid,
  17. datasets:
  18. [
  19. {
  20. label: "Viewers for <?php echo $month . " - " . $year; ?>",
  21. fill: false,
  22. lineTension: 0.1,
  23. backgroundColor: "rgba(59, 89, 152, 0.75)",
  24. borderColor: "rgba(59, 89, 152, 1)",
  25. pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
  26. pointHoverBorderColor: "rgba(59, 89, 152, 1)",
  27. data: viewers,
  28. options:
  29. {
  30. responsive: true,
  31. scales: {
  32. yAxes: [{
  33. ticks: {
  34. beginAtZero: true
  35. }
  36. }]
  37. }
  38. }
  39. }
  40. ]
  41. };
  42. var ctx = $("#mycanvas");
  43. var LineGraph = new Chart(ctx, {
  44. type: 'line',
  45. data: chartdata
  46. });
  47. },
  48. error : function(data) {
  49. }
  50. });
  51. });
  52. </script>

我添加了这部分:

  1. options:
  2. {
  3. responsive: true,
  4. scales: {
  5. yAxes: [{
  6. ticks: {
  7. beginAtZero: true
  8. }
  9. }]
  10. }
  11. }

但它似乎没有做任何事情,并继续显示从任何最小值的数据显示。

bn31dyow

bn31dyow1#

options部件移至图表创建:

  1. var LineGraph = new Chart(ctx, {
  2. type: 'line',
  3. data: chartdata,
  4. options: {
  5. responsive: true,
  6. scales: {
  7. yAxes: [{
  8. ticks: {
  9. beginAtZero: true
  10. }
  11. }]
  12. }
  13. }
  14. });

这里有一个来自文档的例子。

展开查看全部
wsxa1bj1

wsxa1bj12#

  1. options: {
  2. resposive: true,
  3. scales: {
  4. y: {
  5. suggestedMin: 0,
  6. suggestedMax: 100
  7. }
  8. }
  9. }

相关问题