Как поменять местами точки оси X на оси Y, используя диаграммы Google в javascript - PullRequest
Новая
       47

Как поменять местами точки оси X на оси Y, используя диаграммы Google в javascript

1 голос
/ 24 марта 2020

Я пытаюсь построить диаграммы для моего проекта: давление принимается по оси по оси 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>

1 Ответ

0 голосов
/ 24 марта 2020

в диаграммах 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>
...