Линейный график Google с двойной осью Y, но с 3 или более временными рядами - PullRequest
Новая
       43

Линейный график Google с двойной осью Y, но с 3 или более временными рядами

1 голос
/ 22 октября 2019

Мне нужно нарисовать линейный график с несколькими линиями, но график также является двойной Y-диаграммой. В моем случае это может быть 3 или более линий, в которых каждая строка принадлежит левой или правой оси Y.

Итак, глядя на пример / jsfiddle из документации 

  google.charts.load('current', {'packages':['line', 'corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");

    data.addRows([
      [new Date(2014, 0),  -.5,  5.7],
      [new Date(2014, 1),   .4,  8.7],
      [new Date(2014, 2),   .5,   12],
      [new Date(2014, 3),  2.9, 15.3],
      [new Date(2014, 4),  6.3, 18.6],
      [new Date(2014, 5),    9, 20.9],
      [new Date(2014, 6), 10.6, 19.8],
      [new Date(2014, 7), 10.3, 16.6],
      [new Date(2014, 8),  7.4, 13.3],
      [new Date(2014, 9),  4.4,  9.9],
      [new Date(2014, 10), 1.1,  6.6],
      [new Date(2014, 11), -.2,  4.5]
    ]);

    var materialOptions = {
      chart: {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
        // Gives each series an axis name that matches the Y-axis below.
        0: {axis: 'Temps'},
        1: {axis: 'Daylight'}
      },
      axes: {
        // Adds labels to each axis; they don't have to match the axis names.
        y: {
          Temps: {label: 'Temps (Celsius)'},
          Daylight: {label: 'Daylight'}
        }
      }
    };

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
    // Gives each series an axis that matches the vAxes number below.
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1}
      },
      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(data, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawMaterialChart();

}

DEMO

, совершенно неясно, какЯ должен сделать это. Я пытался добавить еще один data.addRows([...]), но это не дает хорошего графика

Есть предложения?

1 Ответ

1 голос
/ 23 октября 2019

не уверен, что я полностью понимаю вопрос.
, но если вам просто нужны дополнительные строки,
вам нужно добавить дополнительные столбцы в таблицу данных.

для каждого добавленного столбца на диаграмме будет добавлена ​​новая строка или серия.
в следующей таблице данных будут сгенерированы четыре строки. 

var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");

и вы контролируете, к какой оси относится каждая линия,
, задав имя axis. 

  series: {
    // Gives each series an axis name that matches the Y-axis below.
    0: {axis: 'Temps'},
    1: {axis: 'Daylight'},
    2: {axis: 'Temps'},
    3: {axis: 'Daylight'}
  },

здесь первая строка или серия 0 будет принадлежать левой оси, Temps.
вторая (серия 1) направо (Daylight) и т. Д.

см. Следующий рабочий фрагмент ... 

  google.charts.load('current', {'packages':['line', 'corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Line 1 - Series 0");
    data.addColumn('number', "Line 2 - Series 1");
    data.addColumn('number', "Line 3 - Series 2");
    data.addColumn('number', "Line 4 - Series 3");

    data.addRows([
      [new Date(2014, 0),  -.5,  5.7, -1, 10],
      [new Date(2014, 1),   .4,  8.7, -1, 10],
      [new Date(2014, 2),   .5,   12, -1, 10],
      [new Date(2014, 3),  2.9, 15.3, -1, 10],
      [new Date(2014, 4),  6.3, 18.6, -1, 10],
      [new Date(2014, 5),    9, 20.9, -1, 10],
      [new Date(2014, 6), 10.6, 19.8, -1, 10],
      [new Date(2014, 7), 10.3, 16.6, -1, 10],
      [new Date(2014, 8),  7.4, 13.3, -1, 10],
      [new Date(2014, 9),  4.4,  9.9, -1, 10],
      [new Date(2014, 10), 1.1,  6.6, -1, 10],
      [new Date(2014, 11), -.2,  4.5, -1, 10]
    ]);

    var materialOptions = {
      chart: {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
        // Gives each series an axis name that matches the Y-axis below.
        0: {axis: 'Temps'},
        1: {axis: 'Daylight'},
        2: {axis: 'Temps'},
        3: {axis: 'Daylight'}
      },
      axes: {
        // Adds labels to each axis; they don't have to match the axis names.
        y: {
          Temps: {label: 'Temps (Celsius)'},
          Daylight: {label: 'Daylight'}
        }
      }
    };

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
    // Gives each series an axis that matches the vAxes number below.
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1},
        2: {targetAxisIndex: 0},
        3: {targetAxisIndex: 1}
      },
      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(data, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawMaterialChart();

}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...