javascript - 向谷歌图表添加笔画

Question

我已经创建了一个谷歌面积图，并将 pointSize 设置为 5，如下面的屏幕截图所示。

有没有办法像下图那样为我的点添加一笔画。

Answer 1

是的，但这很棘手。

执行摘要

只需创建一个脚本来查找所有 <circle> svg 中的元素这是在可视化中创建的 div .

对于所有这些圈子，找到 stroke属性并将其设置为您想要的任何颜色(在您的示例中为 #000000)，然后设置 stroke-width属性设置为您想要的任何线宽(谷歌可视化的默认值是 2 折线图)。

禁用图表交互性，使其保持这种状态。

详细说明

让我们从一些简单的代码开始:

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

看起来像这样:

Google Visualizations 在可视化中使用以下通用代码结构呈现此对象 div元素:

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

这是很多东西，但总的来说，它的工作方式是:

1. 容器 div (在这种情况下为“可视化”)
2. 2 内部 div
3. svg元素

svg元素本身通常遵循这种模式:

1. 整个 svg 的剪切路径
2. 第 1 组:标题
3. 第 2 组:图例
4. 第 3 组:图表区域
5. 第 4 组:轴标签

根据您的图表会有略微不同的变化(如果您不包含标签，它可能不会生成“标题”组，并且通常如果您更改库，它呈现图表的方式会略有不同.但是，对于'corecharts'包，一般一切都会遵循上述)。

由于您想摆弄实际的图表区域部分(图中的圆圈)，让我们更仔细地研究一下该元素。这是 svg对于那个群体。

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

这个显示:

1. 矩形(图表区域)
2. A 组:网格线
3. B 组:面积图(填充)
4. C 组:基线(X 轴)
5. D组:折线图(直线)
6. E 组:圆圈(点)
7. F 组:带有轴标签的子组

所以我们想重点关注那里的 E 组。这是圆圈的代码:

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

最简单的方法就是更改“stroke”元素。

例如，如果我手动将 stroke-width 更改为 2(与线宽相同)，并将颜色更改为黑色(如您的示例所示)，我会得到:

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

这是它的样子:

但是这种方法存在一些问题。每当您将鼠标悬停在图表上时，它都会重新绘制 SVG 元素(因为它突出显示了任何被单击的圆圈，或者如果单击了图例，则会突出显示所有圆圈)，并变成如下所示:

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

所以它只是在它周围重新绘制了一个更大的圆圈，但这意味着你的花式格式都不见了!

基本上，您需要禁用交互性，或者创建一个脚本，即使有那个额外的圆圈也可以运行(因为您不希望两个圆圈都以黑色圆圈结束，因为它会非常棒又大又丑)。

所以我的建议是寻找半径为 X 的圆(其中 X 是页面上大多数圆的任何值，领带指向较小的数字)，并将所有这些元素存储在一个大批。然后遍历数组，更改 stroke-width和 stroke-color每当与图表交互时的属性。

请注意，您的图表越复杂，这将变得越复杂，因为您正在为所有圈子即时执行此操作。如果图表中有任何其他圆圈，他们将得到相同的处理，或者搞砸数学。这会很糟糕。