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

时间:2019-03-27 13:37:10

标签: 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>

如您所见,R P 0.00000024已转换为2.4e-7。但我希望它按原样显示,例如0.00000024
对于其他十进制数,它是完全可以的,但是对于上述十进制数,其转换为指数。有设置的选项吗?这可能吗?

1 个答案:

答案 0 :(得分:2)

借助此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>