Google Charts: global point stroke-color

问题

Attempting to set a global stroke color in chartkick.

'point { size: 18; stroke-color: #F00; }'

but no variation seems to allow global config of this:

pointStrokeColor: '#F00',
style: 'point { stroke-color: #F00; }',
point: {strokeColor: '#F00', stroke: {color: '#F00'}}

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

function drawChart() {
  var data = google.visualization.arrayToDataTable
      ([['X', 'Y', {'type': 'string', 'role': 'style'}],
        [1, 6, null],
        [2, 5, 'point { size: 18; stroke-color: #F00; }'],
        [3, 4, null]
  ]);

  var options = {
    curveType: 'function',
    pointSize: 10,
    pointStrokeColor: '#F00',
    style: 'point { stroke-color: #F00; }',
    point: {strokeColor: '#F00', stroke: {color: '#F00'}}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

So in the above snippet, trying to declare that all the points should have a red border from one global config.

This answer is great but the two options are either configure every point, or use CSS - the CSS is not working for me locally.

回答1:

the only standard way to change the stroke color of a point is to use a 'style' column role

column roles must be set on each point

you could use the DataView class to set the style on all the rows

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    return 'point {stroke-color: #F00;}';
  },
  role: 'style',
  type: 'string'
}]);

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [1, 6],
    [2, 5],
    [3, 4]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'point {stroke-color: #F00;}';
    },
    role: 'style',
    type: 'string'
  }]);

  var options = {
    curveType: 'function',
    pointSize: 10
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  // use view to draw chart
  chart.draw(view, options);
}

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

note: styles applied through a column role do not affect legend markers

css would correct, the only other option would be to use jquery

$('circle').attr('stroke', '#ff0000');
$('circle').attr('stroke-width', '1');

however, the chart will change the points back to their default styles,
anytime there is interactivity, such as on point hover

as such, would need to use a MutationObserver to know when interactivity has occurred,
see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [1, 6],
    [2, 5],
    [3, 4]
  ]);

  var options = {
    curveType: 'function',
    pointSize: 10
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  var observer = new MutationObserver(function (mutations) {
    $('circle').attr('stroke', '#ff0000');
    $('circle').attr('stroke-width', '1');
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });
  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

来源：https://stackoverflow.com/questions/44499720/google-charts-global-point-stroke-color

标签

charts

google-visualization