Question

我需要我的线路图看起来像这样。所以只有水平网格线是可见的

问题是我为第一个Y轴和第二个Y轴加载了不同的数据。这样我就把水平线加倍了。可以显示与第一斧同步的第二斧的数据吗？

例如，左边的数字60000等于右边的〜1800，但不是最接近预加载的2000？这样在60000级别上会有一行。

  var $mixChart = $('#myChart');
  var graphicsData = $mixChart.data('values');

  var labels = [];

  $.each(graphicsData, function(key, item){
    var month_caption = (((''+item.month).length == 1) ? '0'+item.month : item.month)+'.'+item.year;
    labels.push(month_caption);
  });


  var revenues = []; //Доход

  $.each(graphicsData, function(key, item){
    revenues.push(item.income);
  });

  var clients = []; //прибыль

  $.each(graphicsData, function(key, item){
    clients.push(item.profit);
  });

  var lines = []; //траффик

  $.each(graphicsData, function(key, item){
    lines.push(item.traffic);
  });

  const dataLine1 = {
    label: "Траффик",
    data: lines, //траффик
    borderColor: '#99b3ff',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'lines',
  };

  const dataLine2 = {
    label: "Прибыль",
    data: clients, //прибыль
    borderColor: '#ff9999',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'clients',
  };

  const dataLine3 = {
    type: 'line',
    label: "Доход",
    data: revenues, //Доход
    borderColor: '#6bb39a',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    yAxisID: 'revenues',
  };

  const revenuesMax = Math.max.apply(null, revenues) + 2000;
  const clientsMax = Math.max.apply(null, clients) + 2000;
  const linesMax = Math.max.apply(null, lines) + 2000;


  var newChart = document.getElementById("myChart");

  if (newChart) {

    var mix = newChart.getContext('2d');
    mix.canvas.width = 740;
    mix.canvas.height = 270;

    var mixChart = new Chart(mix, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
        {
          type: 'line',
          label: false,
          data: income,
          borderColor: 'rgba(75, 192, 192, 1)',
          backgroundColor: 'rgba(0, 0, 0, 0)',
          yAxisID: 'revenues',
          display: false
        },
        {},
        {}

        ]
      },
      options: {
        responsive: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [
          {
            id: "revenues",
            ticks: {
              beginAtZero: false,
              max: revenuesMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'тыс руб'
            }
          },
          {   display: false,
            id: "clients",
            position: 'right',
            ticks: {
              beginAtZero: false,
              max: clientsMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'Clients'
            }
          },
          {
            id: "lines",
            position: 'right',
            ticks: {
              beginAtZero: false,
              max: linesMax,
              min: -1000,
            },
            scaleLabel: {
              display: true,
              labelString: 'млн руб'
            }
          },
          ]
        },
      }
    });

如何显示与第一个Y轴同步的第二个Y轴的数据？

0 个答案: