Question

尝试在chartkick中设置全局笔触颜色。

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

但似乎没有变化允许全局配置：

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

所以在上面的代码片段中，尝试声明所有点都应该有一个全局配置的红色边框。

This answer很棒但是这两个选项要么配置每个点，要么使用CSS - CSS在本地不适合我。

Answer 1

更改点的笔触颜色的唯一标准方法是使用'style' column role

必须在每个点上设置

列角色

您可以使用DataView class在所有行上设置样式

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

请参阅以下工作代码段...

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>

注意：通过列角色应用的样式不会影响图例标记

css会纠正，唯一的另一种选择是使用jquery

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

但是，图表会将点数更改回默认样式，
任何时候都有交互性，例如点悬停

因此，需要使用MutationObserver来了解交互性何时发生，
请参阅以下工作代码段...

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>

谷歌图表：全球点笔画颜色

1 个答案: