添加笔划到谷歌图表

时间:2013-05-28 08:17:34

标签: javascript google-visualization

我创建了一个谷歌区域图表,并给出了一个5的pointSize作为我的截图。enter image description here

有没有办法为我的点添加笔画,如下图所示。 enter image description here

2 个答案:

答案 0 :(得分:5)

是的,但这很棘手。

执行摘要

只需创建一个脚本,即可找到在<circle>内创建的svg中的所有div元素。

对于所有这些圈子,找到stroke属性并将其设置为您想要的任何颜色(示例中为#000000),并将stroke-width属性设置为您想要的任何线宽(对于折线图,Google Visualization的默认值为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
  });
}

这看起来像这样:

Area Sample

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(&#39;可视化&#39;在这种情况下)
  2. 2内部div
  3. svg元素
  4. svg元素本身通常遵循以下模式:

    1. 整个svg
    2. 的剪切路径
    3. 第1组:标题
    4. 第2组:传奇
    5. 第3组:图表区域
    6. 第4组:轴标签
    7. 根据您的图表,变化略有不同(如果您不包含标签,则可能无法生成&#39;标题&#39;组,一般情况下,如果更改库,方式它呈现的图表会略有不同。但是,对于“核心图表”包,通常一切都将遵循上述内容。

      由于你想摆弄实际的图表区域部分(图中的圆圈),让我们更仔细地查看该元素。以下是该组的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:具有轴标签的子组
      8. 因此我们希望专注于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>
        

        最简单的方法就是改变&#34;中风&#34;元件。

        例如,如果我手动将笔触宽度更改为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>
        

        这是它的样子:

        Revised Area

        但这种方法存在一些问题。每当您将鼠标悬停在图表上时,它会重新绘制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-widthstroke-color属性。

        意识到这会变得更加复杂,因为你正在为所有圈子动态地执行此操作。如果图表中有任何其他圆圈,他们将得到相同的处理,或搞砸数学。哪个会很糟糕。

答案 1 :(得分:1)

这是一个简单的解决方案。每个点的样式都是以编程方式定义的。这是通过向具有角色&#39;样式的数据表添加一列来完成的,然后使用简单的循环将该样式添加到所有点。试试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);
  }