В Google Visualization предусмотрена линия в виде точек

Question

При работе с визуализацией 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>

Answer 1

вы используете Материал линейный график -> packages: ["line"]

google.charts.Line

Есть много опций, которые не поддерживаются Материал
см. -> Ошибка отслеживания для паритета характеристик диаграммы материалов

с использованием диаграммы Classic -> 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>