Как показать данные второго топора Y, синхронизированного с первым? - PullRequest
Новая
       5

Как показать данные второго топора Y, синхронизированного с первым?

0 голосов
/ 04 февраля 2020

Мне нужна моя линейная диаграмма выглядит следующим образом. Таким образом, будут видны только горизонтальные линии сетки

введите описание изображения здесь

на самом деле, я получил это введите описание изображения здесь

Проблема в том, что я загружаю разные данные для 1-го оси Y и для 2-го. Так что я удвоил горизонтальные линии. Можно ли показать данные 2-го топора, синхронизированные с 1-м? *

Например, левое число 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: 'млн руб'
            }
          },
          ]
        },
      }
    });
...