Как изменить форму точки на указанных сериях c в Google Charts Line chart - PullRequest
Новая
       4

Как изменить форму точки на указанных сериях c в Google Charts Line chart

1 голос
/ 08 марта 2020

Я сталкивался с тем, как оформить одну точку в Google Charts:

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}'],

Как правильно решить эту проблему?

1 Ответ

1 голос
/ 10 марта 2020

роль столбца должна следовать непосредственно за серией, которую она представляет.
в этом случае добавьте еще одну '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" });

см. Следующий рабочий фрагмент .. . 

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