Как поменять местами точки оси x на ось y с помощью диаграмм google в javascript

Я пытаюсь построить диаграммы для своего проекта, измеряет давление на оси x и измеряет глубину как ось y, то есть давление в зависимости от глубины Я построил неправильный график, используя диаграмму Google, как можно поменять местами значения точек осей x и y в График, Может ли кто-нибудь нам помочь. Я ожидаю такого результата. Ниже я разместил свой код, который я пробовал

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        let jsonData = {
            "result": {
                "abcData": [
                    {
                        "measuredepth": 0,
                        "pressure": 2500,
                    }, {
                        "measuredepth": 0,
                        "pressure": 2492,
                    },
                    {
                        "measuredepth": 4450,
                        "pressure": 3259
                    },
                    {
                        "measuredepth": 4500,
                        "pressure": 3273
                    }]
            }
        }


        google.charts.load('current', {
            packages: ['corechart']
        }).then(function () {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'md');
            // data.addColumn('number', 'CT');
            data.addColumn('number', 'WELL');

            for (let i = 0; i < jsonData.result.abcData.length; i++) {
                debugger;
                data.addRows([[jsonData.result.abcData[i].measuredepth, jsonData.result.abcData[i].pressure]]);
            }

            var options = {
                title: 'GRaph-data',
                width: 900,
                height: 500,
                chartArea: {
                    top: 100
                },
                vAxis: {
                    direction: 0
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
            //chart.draw(data, options);
            google.visualization.events.addListener(chart, 'ready', function () {
                var chartLayout = chart.getChartLayoutInterface();
                var chartBounds = chartLayout.getChartAreaBoundingBox();
                var labels = chart.getContainer().getElementsByTagName('text');
                var fontSize;
                var yCoord;
                Array.prototype.forEach.call(labels, function (label) {
                    fontSize = parseFloat(label.getAttribute('font-size'));
                    switch (label.getAttribute('text-anchor')) {
                        // chart title
                        case 'start':
                            yCoord = parseFloat(label.getAttribute('y'));
                            label.setAttribute('y', yCoord - fontSize);
                            break;

                        // x-axis labels
                        case 'middle':
                            label.setAttribute('y', chartBounds.top - (fontSize / 2));
                            break;

                        // y-axis labels
                        default:
                        // ignore
                    }
                });
            });

            chart.draw(data, options);
        }
        );
    </script>
</head>

<body>
    <div id="line_top_x"></div>
</body>

</html>

javascript charts google-visualization google-chat
person shivu    schedule 24.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

в диаграммах Google ось x всегда является первым столбцом в таблице данных.
если вы хотите использовать давление в качестве оси x, просто поменяйте порядок значений при добавлении строк.
сделайте давление первый...

data.addRows([[jsonData.result.abcData[i].pressure, jsonData.result.abcData[i].measuredepth]]);

Кроме того, если вы не хотите, чтобы Google угадывал, какие метки использовать для оси x,
вы можете добавить свои собственные отметки.

здесь мы строим динамично ...

  var ticks = [];
  var range = data.getColumnRange(0);
  for (var i = 0; i <= range.max; i=i+1000) {
    ticks.push(i);
  }
  ticks.push(i);

  var options = {
    ...
    hAxis: {
      ticks: ticks
    },
    ...
  };

вы, очевидно, также можете жестко кодировать ...

    hAxis: {
      ticks: [0, 1000, 2000, 3000, 4000]
    },

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

  data.sort([{column: 0}]);

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

let jsonData = {
  "result": {
      "abcData": [
          {
              "measuredepth": 0,
              "pressure": 2500,
          }, {
              "measuredepth": 0,
              "pressure": 2492,
          },
          {
              "measuredepth": 4450,
              "pressure": 3259
          },
          {
              "measuredepth": 4500,
              "pressure": 3273
          }]
  }
}


google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'md');
  // data.addColumn('number', 'CT');
  data.addColumn('number', 'WELL');

  for (let i = 0; i < jsonData.result.abcData.length; i++) {
    data.addRows([[jsonData.result.abcData[i].pressure, jsonData.result.abcData[i].measuredepth]]);
  }
  data.sort([{column: 0}]);
  
  var ticks = [];
  var range = data.getColumnRange(0);
  for (var i = 0; i <= range.max; i=i+1000) {
    ticks.push(i);
  }
  ticks.push(i);

  var options = {
    title: 'GRaph-data',
    width: 900,
    height: 500,
    chartArea: {
      top: 100
    },
    hAxis: {
      ticks: ticks
    },
    vAxis: {
      direction: 0
    },
    pointSize: 4
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
  
  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');
    var fontSize;
    var yCoord;
    Array.prototype.forEach.call(labels, function (label) {
      fontSize = parseFloat(label.getAttribute('font-size'));
      switch (label.getAttribute('text-anchor')) {
        // chart title
        case 'start':
          yCoord = parseFloat(label.getAttribute('y'));
          label.setAttribute('y', yCoord - fontSize);
          break;

        // x-axis labels
        case 'middle':
          label.setAttribute('y', chartBounds.top - (fontSize / 2));
          break;

        // y-axis labels
        default:
        // ignore
      }
    });
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_top_x"></div>

person WhiteHat    schedule 24.03.2020