javascript - 如何禁用将十进制数转换为指数?

标签 javascript jquery chart.js

window.chartColors = {
  red: '#ffb5c5',
  orange: '#FFA500',
  yellow: '#F0E68C',
  green: '#aee0e0',
  blue: '#87CEFA',
  purple: '#EE82EE',
  grey: '#C0C0C0'
};
$(document).ready(function() {
  var data = [{
    "tc": "1.25173997",
    "trf": "0.00000024",
    "nc": "1.00139199",
    "formatted_date": "temmp1",
    "from_date": "2019-02-01 00:00:00",
    "to_date": "2019-02-08 23:59:59"
  }, ];
  var formatted_date = [];

  var tcs = [];
  var trps = [];
  var ncs = [];
  // var data = $.parseJSON(data);
  $.each(data, function(index, item) {
    formatted_date.push(item.formatted_date);
    tcs.push(item.tc);
    trps.push(item.trf);
    ncs.push(item.nc);
  });

  refData = [{
      label: 'C',
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: tcs,
      fill: false,
      /* cubicInterpolationMode: 'monotone' */

    },
    {
      label: 'R P',
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: trps,
      fill: false
    },
    {
      label: 'N C',
      backgroundColor: window.chartColors.green,
      borderColor: window.chartColors.green,

      data: ncs,
      fill: false
    },
  ];


  var chartdata = {
    labels: formatted_date,
    datasets: refData
  };
  //console.log(chartdata);
  var graphTarget = $("#myChart");
  var Graph = new Chart(graphTarget, {
    type: 'line',
    data: chartdata,
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'R P'
      },
      scales: {
        xAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Duration'
          }
        }],
        yAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Amt'
          },
          ticks: {
            min: 0, // it is for ignoring negative step.
          }
        }]
      },

    },
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>

正如您所见,RP 0.00000024 正在转换为 2.4e-7。但我希望它按原样显示,即 0.00000024
对于其他小数,它完全没问题,但对于上述小数,它正在转换为指数。有什么选项可以设置吗?这可能吗?

最佳答案

借助这个solution ,我解决了我的问题。如果有人有更好的解决方案请告诉我。

Number.prototype.noExponents = function() {
  var data = String(this).split(/[eE]/);
  if (data.length == 1) return data[0];

  var z = '',
    sign = this < 0 ? '-' : '',
    str = data[0].replace('.', ''),
    mag = Number(data[1]) + 1;

  if (mag < 0) {
    z = sign + '0.';
    while (mag++) z += '0';
    return z + str.replace(/^\-/, '');
  }
  mag -= str.length;
  while (mag--) z += '0';
  return str + z;
}


window.chartColors = {
  red: '#ffb5c5',
  orange: '#FFA500',
  yellow: '#F0E68C',
  green: '#aee0e0',
  blue: '#87CEFA',
  purple: '#EE82EE',
  grey: '#C0C0C0'
};
$(document).ready(function() {
  var data = [{
    "tc": "1.25173997",
    "trf": "0.00000024",
    "nc": "1.00139199",
    "formatted_date": "temmp1",
    "from_date": "2019-02-01 00:00:00",
    "to_date": "2019-02-08 23:59:59"
  }, ];
  var formatted_date = [];

  var tcs = [];
  var trps = [];
  var ncs = [];
  // var data = $.parseJSON(data);
  $.each(data, function(index, item) {
    formatted_date.push(item.formatted_date);
    tcs.push(item.tc);
    trps.push(item.trf);
    ncs.push(item.nc);
  });

  refData = [{
      label: 'C',
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: tcs,
      fill: false,
      /* cubicInterpolationMode: 'monotone' */

    },
    {
      label: 'R P',
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: trps,
      fill: false
    },
    {
      label: 'N C',
      backgroundColor: window.chartColors.green,
      borderColor: window.chartColors.green,

      data: ncs,
      fill: false
    },
  ];


  var chartdata = {
    labels: formatted_date,
    datasets: refData
  };
  //console.log(chartdata);
  var graphTarget = $("#myChart");
  var Graph = new Chart(graphTarget, {
    type: 'line',
    data: chartdata,
    options: {
      responsive: true,
      title: {
        display: true,
        text: 'R P'
      },
      scales: {
        xAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Duration'
          }
        }],
        yAxes: [{
          // stacked: true,
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Amt'
          },
          ticks: {
            min: 0, // it is for ignoring negative step.

          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';

            if (label) {
              label += ': ';
            }

            label += tooltipItem.yLabel.noExponents();
            return label;
          }
        }
      }
    },
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>

关于javascript - 如何禁用将十进制数转换为指数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55378587/

相关文章:

javascript - 从 javascript 获取 HTTP Basic Auth 用户名?

JQuery - 如何获取按比例自动确定的图像的宽度或高度?

javascript - 使用图表js创建两个内联图表

javascript - 发送数据的时间计数器

javascript - 使用 AngularJS,使用 {{ 和 }} 作为文字

javascript - 链接和函数组合

jquery - 延迟后的行动

javascript - JQuery淡出问题?在 Rails 中

javascript - 如何从图表中删除 y 轴标签?

javascript - onClick 事件隐藏数据集 Chart.js V2