Charts.js 多线刻度。见价值曲线

Question

大家好，提前致谢。我正在使用多行 charts.js 来比较来自不同帐户的关注者数据。我设法用以下JS代码解决了图形的动态填充：

$(document).ready(function() {

  // Read data file with random string generated by current time
  // to bypass browser cache, and create chart
  $.get('db/consultas/comparaFollowers.php', {'_': $.now()}, function(csvString) {

    var datafollowers = Papa.parse(csvString).data;
    var timeLabelsF = datafollowers.slice(1).map(function(row) { return row[0]; });

    var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false // `true` for area charts, `false` for regular line charts
        }
      )
    }

    // Get container for the chart
    var ctx = document.getElementById('ChartCompFollowers').getContext('2d');

    new Chart(ctx, {
      type: 'line',

      data: {
        labels: timeLabelsF,
        datasets: datasetsF,
      },
      
      options: {
        legend: {
          display: true,
        },
        maintainAspectRatio: false,
        scales: {
          max: 5,
          xAxes: [{
            time: {
              unit: 'date'
            },
            gridLines: {
              display: false,
              drawBorder: false
            },
            ticks: {
              maxTicksLimit: 10,

            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: false,
              
            },
            gridLines: {
              color: "rgb(234, 236, 244)",
              zeroLineColor: "rgb(234, 236, 244)",
              drawBorder: false,
              borderDash: [2],
              zeroLineBorderDash: [2]
            }
          }],
        },
        tooltips: {
          displayColors: true,
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ': ' + tooltipItem.yLabel.toLocaleString();
            }
          }
        },
        plugins: {
          colorschemes: {
            /*
              Replace below with any other scheme from
              https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html
            */
            scheme: 'office.Excel16'
          }
        }
      }
    });

  });

});

现在的问题是，如果不同配置文件的值相距很远，则这些线被视为两条直线，时间线的变化不会被理解。

Imagen1

想请问有什么方法可以消除或修改比例尺，让数据远看也能看到数值变化曲线

Imagen2

非常感谢您的帮助。

Answer 1

您的第一张图片与普通 Chart.js 的单一比例尽可能接近，Chart.js 不支持比例中断。

您可以添加第二个 Y 轴并将数据集映射到不同的比例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12000, 19000, 3000, 5000, 2000, 3000],
        borderColor: 'orange',
        yAxisID: 'y'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink',
        yAxisID: 'y2'
      }
    ]
  },
  options: {
    scales: {
      y: {
        position: 'left'
      },
      y2: {
        position: 'right'
      }
    }
  }
}

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.7.1/chart.js"></script>
</body>

编辑：
请注意，您仍在使用 lib

的 V2

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12000, 19000, 3000, 5000, 2000, 3000],
        borderColor: 'orange',
        yAxisID: 'y'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink',
        yAxisID: 'y2'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'y',
        position: 'left'
      }, {
        id: 'y2',
        position: 'right'
      }]
    }
  }
}

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>

Answer 2

创建不同的 Y-Axes 对我来说效果很好，尽管是部分效果。修改 JS 代码为每个比较元素创建一个轴：

var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          yAxisID: 'y' + i
        }
      )
    }

好吧，修改后的图表版本 2 无法按指示工作。在版本 3 中，除其他外，颜色已取消配置，如图所示。

问题是我有很多图形，我必须调整所有图形的代码才能与版本 3 一起使用（我会这样做，但我对此很陌生，修复它们需要时间全部）。有没有办法对版本 2 做同样的事情？我该怎么做才能看到所有轴和创建的轴？

Charts.js 多线刻度。见价值曲线

Charts.js Multi Line scales. See value curve

javascript

php

chart.js