如何更改谷歌图表折线图中特定系列的点形状

Question

我遇到了如何在 Google 图表中设置单个点的样式：

https://developers.google.com/chart/interactive/docs/points

但我的图表有多个系列。我已经实现了我的图表的工作版本，但我只能设置最后一个系列的样式：

https://codepen.io/trevcis/pen/PooyNqR

如何定位第一个系列（蓝线）？我可以更改我的系列数据，但计划在图表中添加更多系列，所以想弄清楚。

我想我可以添加另一个角色列

  data.addColumn('date', 'Date');
  data.addColumn('number', 'Linepack');
  data.addColumn({role: 'style', type: 'string'});  // added
  data.addColumn('number', 'Target');
  data.addColumn({role: 'style', type: 'string'});

然后添加另一个点配置，但它不起作用。

  [new Date(2020, 2, 10), 515,'point { size: 12; shape-type: triangle;fill-color: #ff6600;opacity:0.9}',520,'point { size: 12; shape-type: circle;fill-color: #ff6600;opacity:0.9}'], 

解决这个问题的正确方法是什么？

Answer 1

列角色应该直接跟在它所代表的系列之后。
在这种情况下，直接在第一个系列之后添加另一个'style' 角色...

data.addColumn("date", "Date");
data.addColumn("number", "Linepack");
data.addColumn({ role: "style", type: "string" });  // <-- add style role
data.addColumn("number", "Target");
data.addColumn({ role: "style", type: "string" });

请参阅以下工作 sn-p...

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

function drawTrendlines() {
  var data = new google.visualization.DataTable();
  data.addColumn("date", "Date");
  data.addColumn("number", "Linepack");
  data.addColumn({ role: "style", type: "string" });
  data.addColumn("number", "Target");
  data.addColumn({ role: "style", type: "string" });
  data.addRows([
    [new Date(2020, 2, 12), 510, null, 530, null],
    [new Date(2020, 2, 11), 500, null, 538, null],
    [new Date(2020, 2, 10), 515, null, 520, null],
    [
      new Date(2020, 2, 9),
      505,
      null,
      540,
      "point { size: 12; shape-type: triangle;fill-color: #ff6600;opacity:0.9;}"
    ],
    [
      new Date(2020, 2, 8),
      525,
      "point { size: 12; shape-type: star;fill-color: magenta;opacity:0.9;}",
      530,
      null
    ],
    [
      new Date(2020, 2, 7),
      500,
      null,
      510,
      "point { size: 12; shape-type: triangle; fill-color: #ff6600; opacity:0.9; shape-rotation:180;}"
    ],
    [
      new Date(2020, 2, 6),
      490,
      "point { size: 12; shape-type: star;fill-color: magenta;opacity:0.9; shape-rotation:180;}",
      525,
      null
    ]
  ]);

  var options = {
    title: "",
    hAxis: {
      title: ""
    },
    vAxis: {
      title: "E3M3/Day"
    },
    //colors: ['#003399', '#009933'],
    trendlines: {
      0: {
        type: "exponential",
        color: "#0e406a",
        opacity: 0.5,
        visibleInLegend: true,
        labelInLegend: "Linepack Trend"
      },
      1: {
        type: "exponential",
        color: "#799b3e",
        opacity: 0.5,
        visibleInLegend: true,
        labelInLegend: "Target Trend"
      }
    },
    series: {
      0: {
        color: "#0e406a",
        lineWidth: 5,
        pointsVisible: "true",
        pointSize: 12
      },
      1: {
        color: "#799b3e",
        lineWidth: 3,
        pointsVisible: "true",
        pointSize: 8,
        lineDashStyle: [5, 3]
      }
    },
    legend: "bottom",
    vAxis: {
      gridlines: { count: 2 },
      maxValue: 550,
      minValue: 450,
      textPosition: "none"
    },
    hAxis: {
      format: "M/d/yy",
      gridlines: { count: 15 },
      textPosition: "none"
    },
    dataOpacity: 0.5
  };

  var container = document.getElementById("chart_div");
  var chart = new google.visualization.LineChart(
    document.getElementById("chart_div")
  );

  // change trendline (1)  to dashed
  google.visualization.events.addListener(chart, "ready", function() {
    var pathElements = container.getElementsByTagName("path");
    Array.prototype.forEach.call(pathElements, function(path) {
      if (path.getAttribute("stroke") === options.trendlines[1].color) {
        path.setAttribute("stroke-dasharray", "5, 3");
      }
    });
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>