时间戳

首页 > 解决方案 > Google Visualization 以点的形式提供一条线

google-visualization - Google Visualization 以点的形式提供一条线

问题描述

我在使用 Google 可视化时遇到了以下问题。

我有 4 个特定数字的数组：

第一个数字数组 (X) 用于显示沿 X 轴的坐标。

第二个和第三个数组（Y1 和 Y2）是您想要以线的形式表示的 Y 轴坐标。

第四个数组（Y3）也是沿 Y 轴的坐标，必须用点表示。

我能够为第二个和第三个数组制作线条，但是经过很多天的搜索，我无法将 4 个数组显示为点图。在与 ComboChart 一起工作时也无法成功。我将非常感谢您的帮助。谢谢！

例子：

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


<script>
    let X = [1, 2, 3, 4, 5, 6]; //Х;
    let Y1 = [1, 1, 1, 1, 1, 1.1]; //First line;
    let Y2 = [1.1, 1.1, 1.1, 1.1, 1.1, 1.2]; // Second line;
    let Y3 = [1.2, 1.2, 1.2, 1.2, 1.2, 1.3]; // This should be presented in the form of points, not lines


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

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Х');
        data.addColumn('number', 'Y1');
        data.addColumn('number', 'Y2');
        data.addColumn('number', 'Y3');

        for (let i = 0; i < 6; ++i) {
            data.addRows([
                [X[i], Y1[i], Y2[i], Y3[i]],
            ]);
        }
        var options = {
            height: 500
        };

        var chart = new 
        google.charts.Line(document.getElementById('Graphic'));
        chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>

标签： google-visualization

解决方案

您正在使用材料折线图 -->packages: ["line"]

google.charts.Line

Material不支持的选项有很多，
请参见 --> Tracking Issue for Material Chart Feature Parity

使用经典图表 -->packages: ["corechart"] 

google.visualization.LineChart

有几种方法可以实现，
最简单的方法是更改​​系列类型... 

var options = {
    height: 500,
    series: {
      2: {
        type: 'scatter'
      }
    }
};

请参阅以下工作片段... 

let X = [1, 2, 3, 4, 5, 6]; //?;
let Y1 = [1, 1, 1, 1, 1, 1.1]; //First line;
let Y2 = [1.1, 1.1, 1.1, 1.1, 1.1, 1.2]; // Second line;
let Y3 = [1.2, 1.2, 1.2, 1.2, 1.2, 1.3]; // This should be presented in the form of points, not lines


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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', '?');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addColumn('number', 'Y3');

    for (let i = 0; i < 6; ++i) {
        data.addRows([
            [X[i], Y1[i], Y2[i], Y3[i]],
        ]);
    }
    var options = {
        height: 500,
        series: {
          2: {
            type: 'scatter'
          }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('Graphic'));
    chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Graphic"></div>

推荐阅读