添加笔划到谷歌图表

Question

I have created an google area chart and give a pointSize of 5 as my screenshot below.

Is there a way to add a stroke to my points like the image below.

Answer 1

Yes, but it's tricky.

Executive Summary

Just create a script to find all the <circle> elements in the svg that's created inside the visualization div .

For all those circles, find the stroke property and set it to whatever color you want ( #000000 in your example), and set the stroke-width property to whatever linewidth you want (the default for Google Visualization is 2 for line charts).

Disable Chart Interactivity so it stays that way.

Detailed Explanation

Let's start off with some simple code:

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Series ID', 'Value'],
    ['A', 165],
    ['B', 135],
    ['C', 157],
    ['D', 139],
    ['E', 136]
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    width: 600,
    height: 400,
    pointSize: 10
  });
}

This looks like this:

Google Visualizations renders this object with the following generic code structure inside the visualization div element:

<div id="visualization" style="width: 600px; height: 400px; position: relative;">
  <div style="position: relative; width: 600px; height: 400px;" dir="ltr">
    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
      <svg width="600" height="400" style="overflow: hidden;">
        <defs id="defs">
          <clipPath id="_ABSTRACT_RENDERER_ID_0">
            <rect x="115" y="77" width="371" height="247">
          </clipPath>
        </defs>
        <rect x="0" y="0" width="600" height="400" stroke="none" stroke-width="0" fill="#ffffff">
        <g>
          <rect x="499" y="77" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
          <g>
            <rect x="499" y="77" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
            <g>
              <text text-anchor="start" x="517" y="88.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Value</text>
            </g>
            <rect x="499" y="77" width="13" height="13" stroke="none" stroke-width="0" fill="#3366cc">
          </g>
        </g>
        <g>
          <rect x="115" y="77" width="371" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
          <g clip-path="url(http://savedbythegoog.appspot.com/retrieve_cache?unique_id=b65582b5691907b9b17033f29fdb4c4bfc18e583#_ABSTRACT_RENDERER_ID_0)">
            <g>
              <rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
              <rect x="115" y="262" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
              <rect x="115" y="200" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
              <rect x="115" y="139" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
              <rect x="115" y="77" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
            </g>
            <g>
              <g>
                <path d="M115.5,323.5L115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22L485.5,323.5L393,323.5L300.5,323.5L208,323.5L115.5,323.5" stroke="none" stroke-width="0" fill-opacity="0.3" fill="#3366cc">
              </g>
            </g>
            <g>
              <rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#333333">
            </g>
            <g>
              <path d="M115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none">
            </g>
          </g>
          <g>
            <circle cx="115.5" cy="120.55000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
            <circle cx="208" cy="157.45" r="6" stroke="none" stroke-width="0" fill="#3366cc">
            <circle cx="300.5" cy="130.39000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
            <circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
            <circle cx="485.5" cy="156.22" r="6" stroke="none" stroke-width="0" fill="#3366cc">
          </g>
          <g>
            <g>
              <text text-anchor="middle" x="115.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">A</text>
            </g>
            <g>
              <text text-anchor="middle" x="208" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">B</text>
            </g>
            <g>
              <text text-anchor="middle" x="300.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">C</text>
            </g>
            <g>
              <text text-anchor="middle" x="393" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">D</text>
            </g>
            <g>
              <text text-anchor="middle" x="485.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">E</text>
            </g>
            <g>
              <text text-anchor="end" x="102" y="328.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">0</text>
            </g>
            <g>
              <text text-anchor="end" x="102" y="266.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">50</text>
            </g>
            <g>
              <text text-anchor="end" x="102" y="205.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">100</text>
            </g>
            <g>
              <text text-anchor="end" x="102" y="143.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">150</text>
            </g>
            <g>
              <text text-anchor="end" x="102" y="82.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">200</text>
            </g>
          </g>
        </g>
        <g>
      </svg>
    </div>
  </div>
  <div style="display: none; position: absolute; top: 410px; left: 610px; white-space: nowrap; font-family: Arial; font-size: 13px;">Value</div>
  <div></div>
</div>

That's a lot of stuff, but in general, the way it works is:

1. Container div ('visualization' in this case)
2. 2 Internal div
3. svg element

The svg element itself generally follows this pattern:

1. Clipping path for the entire svg
2. Group #1: Title
3. Group #2: Legend
4. Group #3: Chart Area
5. Group #4: Axis Labels

There are slightly different variations depending on your chart (if you don't include a label, it may not generate the 'Title' group, and in general if you change the library, the way it renders charts will be slightly different. However, for the 'corecharts' package, generally everything will follow the above).

Since you want to fiddle with the actual chart area portion (the circles in the graph), let's look in to that element a bit more closely. Here is the svg for that group.

<g>
  <rect x="115" y="77" width="371" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
  <g clip-path="url(http://savedbythegoog.appspot.com/retrieve_cache?unique_id=5c972f534cccaf429927a9b83381537e632ce3f8#_ABSTRACT_RENDERER_ID_0)">
    <g>
      <rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
      <rect x="115" y="262" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
      <rect x="115" y="200" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
      <rect x="115" y="139" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
      <rect x="115" y="77" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc">
    </g>
    <g>
      <g>
        <path d="M115.5,323.5L115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22L485.5,323.5L393,323.5L300.5,323.5L208,323.5L115.5,323.5" stroke="none" stroke-width="0" fill-opacity="0.3" fill="#3366cc">
      </g>
    </g>
    <g>
      <rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#333333">
    </g>
    <g>
      <path d="M115.5,120.55000000000001L208,157.45L300.5,130.39000000000001L393,152.53L485.5,156.22" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none">
    </g>
  </g>
  <g>
    <circle cx="115.5" cy="120.55000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
    <circle cx="208" cy="157.45" r="6" stroke="none" stroke-width="0" fill="#3366cc">
    <circle cx="300.5" cy="130.39000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
    <circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
    <circle cx="485.5" cy="156.22" r="6" stroke="none" stroke-width="0" fill="#3366cc">
  </g>
  <g>
    <g>
      <text text-anchor="middle" x="115.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">A</text>
    </g>
    <g>
      <text text-anchor="middle" x="208" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">B</text>
    </g>
    <g>
      <text text-anchor="middle" x="300.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">C</text>
    </g>
    <g>
      <text text-anchor="middle" x="393" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">D</text>
    </g>
    <g>
      <text text-anchor="middle" x="485.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">E</text>
    </g>
    <g>
      <text text-anchor="end" x="102" y="328.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">0</text>
    </g>
    <g>
      <text text-anchor="end" x="102" y="266.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">50</text>
    </g>
    <g>
      <text text-anchor="end" x="102" y="205.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">100</text>
    </g>
    <g>
      <text text-anchor="end" x="102" y="143.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">150</text>
    </g>
    <g>
      <text text-anchor="end" x="102" y="82.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">200</text>
    </g>
  </g>
</g>

This one shows:

1. Rectangle (the chart area)
2. Group A: Grid Lines
3. Group B: Area Chart (the fill)
4. Group C: Baseline (X Axis)
5. Group D: Line Chart (the line)
6. Group E: Circles (the points)
7. Group F: Sub-groups with axis labels

So we want to focus on Group E there. Here is the code for the circles:

<g>
<circle cx="115.5" cy="120.55000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="208" cy="157.45" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="300.5" cy="130.39000000000001" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
<circle cx="485.5" cy="156.22" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>

The easiest way is just to change the "stroke" element.

For instance, if I manually change the stroke-width to 2 (the same as the line-width), and the color to black (as in your example), I get this:

<g>
<circle cx="115.5" cy="120.55000000000001" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="208" cy="157.45" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="300.5" cy="130.39000000000001" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="393" cy="152.53" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
<circle cx="485.5" cy="156.22" r="6" stroke="#000000" stroke-width="2" fill="#3366cc">
</g>

Here is what it looks like:

But there are a few issues with this method. Any time you mouseover the chart, it redraws the SVG element (because it highlights any circle that is clicked, or all circles if the legend is clicked), and becomes something like this:

<g>
<circle cx="393" cy="152.53" r="8" stroke="#3366cc" stroke-width="1" fill="#ffffff">
<circle cx="393" cy="152.53" r="6" stroke="none" stroke-width="0" fill="#3366cc">
</g>

So it just redraws an even bigger circle around it, but this means your fancy formatting is all gone!

Basically, you would need to either disable interactivity, or create a script that can run even when there is that additional circle (because you don't want both circles to end up with black rings around them, as it will be super big and ugly).

So what I'd suggest is look for circles, with a radius of X (where X is whatever the majority of circles are on the page, with a tie going to the smaller number), and store all those elements in an array. Then just go through the array, changing the stroke-width and stroke-color properties whenever the chart is interacted with at all.

Realize that this will become far more complicated the more complex your chart gets, as you are doing this on the fly for all circles. If there are any other circles in the chart they will get the same treatment, or screw up the math. Which would suck.

Answer 2

Here is a simple solution. The style of each point is defined programmatically. This is done by adding a column to the datatable having the role 'style', then adding that style to all points using a simple loop. Try on JSFiddle: https://jsfiddle.net/m45z7mmp/

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var dataArray = [
      ['X', 'Y', {
        'type': 'string',
        'role': 'style'
      }],
      [1, 3],
      [2, 2.5],
      [3, 3],
      [4, 4],
    ];

    for (i = 1; i < dataArray.length; i++) {
      dataArray[i].push('point {stroke-width: 2;  stroke-color: #e97b2c; fill-color: #eeeeee }');
    }

    var data = google.visualization.arrayToDataTable(dataArray);

    var options = {
      colors: ['#e97b2c'],
      pointSize: 8,
    };

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