Google Visualization：折线与散点混合展示实现问题求助

Got it, let's get your Y3 series displaying as scatter points instead of a line! The main issue with your current code is that you're using the dedicated Line chart package, which only supports line-based series. To mix line and scatter plots, we need to switch to the ComboChart (part of the corechart package) and explicitly define the type for each data series.

Here's the revised code with explanations of the key changes:

<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]; // X-axis values
let Y1 = [1, 1, 1, 1, 1, 1.1]; // First line series
let Y2 = [1.1, 1.1, 1.1, 1.1, 1.1, 1.2]; // Second line series
let Y3 = [1.2, 1.2, 1.2, 1.2, 1.2, 1.3]; // Scatter point series

// Load the corechart package (includes ComboChart) instead of the line-only package
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);

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

  // Populate data (your original loop works fine, simplified here)
  for (let i = 0; i < X.length; ++i) {
    data.addRow([X[i], Y1[i], Y2[i], Y3[i]]);
  }

  var options = {
    height: 500,
    // Define chart type for each series (indexes match data columns)
    series: {
      0: { type: 'line' },   // Y1 = line
      1: { type: 'line' },   // Y2 = line
      2: { type: 'scatter' } // Y3 = scatter points
    }
  };

  // Create ComboChart instance instead of Line chart
  var chart = new google.visualization.ComboChart(document.getElementById('Graphic'));
  chart.draw(data, options); // No need for convertOptions with corechart
}
</script>

Key Changes Made: #

• Switched to corechart package: This package includes ComboChart, which supports mixing multiple chart types in one visualization.
• Defined series types: In the options.series object, we map each data column (by index) to its desired chart type. Column 0 = Y1, column 1 = Y2, column 2 = Y3.
• Used ComboChart instance: Replaced google.charts.Line with google.visualization.ComboChart to enable mixed-type rendering.
• Removed convertOptions: The corechart package uses standard Google Visualization options, so we don't need the Line chart's conversion helper.

This should render Y1 and Y2 as smooth lines, and Y3 as standalone scatter points exactly as you want!

内容的提问来源于stack exchange，提问作者Антон Зеленков