如何以科学计数法获取Chart js标签

Question

我在折线图的 y 轴上绘制频率标签。这些值将是 2300000000、5682960000 等行。我必须将它们转换为沿 y 轴的科学记数法。我已经看到天平有一个对数选项，但我无法让它工作。我事先不知道我的价值观。我正在寻找 2.65e^8 的值。类似的东西。

    var options = {
    type: 'line',
    data: {
        labels: {{ labels | safe }},
        datasets: [{
            label: '# of Votes',
            data: {{ values | safe }},
            backgroundColor: 'red',
            borderWidth: 1
        },
        {
            label: '# of Points',
            data: [{
            x: {{ labels2[0] | safe }},
            y: {{ values2[0] | safe }}
            }, {
            x: {{ labels2[1] | safe }},
            y: {{ values2[1] | safe }}
            }, {
            x: {{ labels2[2] | safe }},
            y: {{ values2[2] | safe }}
            }],
            backgroundColor: 'black',
            borderWidth: 1,
            showLine: false,
            order: 1
        }
        ]
    },
    options: {
        scales: {
        y: {
            ticks: {
            callback: (val) => (val.toExponential())
            }
        }
        }
    }
    }

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);

Answer 1

您可以为此使用报价回调：

options: {
    scales: {
        y: {
        ticks: {
            callback: (val) => (val.toExponential())
        }
      }
    }
  }

示例： V3

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          callback: (val) => (val.toExponential())
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

V2（请更新）：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          callback: (val) => (val.toExponential())
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

如何以科学计数法获取Chart js标签

How to get Chart js labels in scientific notation

python

graph

chart.js