Log Scale

Log Scale - 图1

config setup actions

  1. const config = {
  2. type: 'line',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. title: {
  8. display: true,
  9. text: 'Chart.js Line Chart - Logarithmic'
  10. }
  11. },
  12. scales: {
  13. x: {
  14. display: true,
  15. },
  16. y: {
  17. display: true,
  18. type: 'logarithmic',
  19. }
  20. }
  21. },
  22. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
  3. const labels = Utils.months({count: 7});
  4. const data = {
  5. labels: labels,
  6. datasets: [
  7. {
  8. label: 'Dataset 1',
  9. data: logNumbers(DATA_COUNT),
  10. borderColor: Utils.CHART_COLORS.red,
  11. backgroundColor: Utils.CHART_COLORS.red,
  12. fill: false,
  13. },
  14. ]
  15. };
  1. const logNumbers = (num) => {
  2. const data = [];
  3. for (let i = 0; i < num; ++i) {
  4. data.push(Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5)));
  5. }
  6. return data;
  7. };
  8. const actions = [
  9. {
  10. name: 'Randomize',
  11. handler(chart) {
  12. chart.data.datasets.forEach(dataset => {
  13. dataset.data = logNumbers(chart.data.labels.length);
  14. });
  15. chart.update();
  16. }
  17. },
  18. ];