如何在javascript中使用Google图表将x轴点转换为y轴

问题描述 投票:1回答:1

我正在尝试为我的项目绘制图表,并在x轴]上施加压力,并以y轴来测量深度,即压力与测量深度 I plotted wrong graph,使用Google图表,如何互换图中的x和y轴点值,任何人都可以帮助我们。I expect output like this下面我发布了我尝试过的代码

<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>

[我正在尝试为我的项目绘制图表,并在x轴上测量压力,并在y轴上测量深度,即压力与测量深度,我使用Google图表绘制了错误的图形,如何互换x和y ...

javascript charts google-visualization google-chat
1个回答
0
投票

在Google图表中,x轴始终是数据表中的第一列。如果要将压力作为x轴,则只需在添加行时交换值的顺序即可。首先施加压力...

© www.soinside.com 2019 - 2024. All rights reserved.