时间戳

首页 > 解决方案 > 如何使用 javascript 中的谷歌图表将 x 轴点交换为 y 轴

javascript - 如何使用 javascript 中的谷歌图表将 x 轴点交换为 y 轴

问题描述

我正在尝试为我的项目绘制图表，在x 轴上测量压力并将深度测量为y 轴，即 压力与测量深度 我绘制了错误的图表，使用谷歌图表，如何在图表中互换 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>

标签： javascriptchartsgoogle-visualizationgoogle-chat

解决方案

在谷歌图表中，x 轴始终是数据表中的第一列。
如果您想将压力作为 x 轴，则只需在添加行时交换值的顺序。
先给压力... 

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

此外，如果您不想让谷歌猜测 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>

推荐阅读