Google图表LineChart自定义点 [英] Google Charts LineChart Custom Points

问题描述

是否可以将自定义点形状添加到折线图？

Google的自定义点文档没有提及添加他们尚未提供的形状的任何信息。

我的确发现了类似的问题，一个很好的答案，但我不认为我可以使用angular-google-chart来做到这一点。即使有可能，我也希望有一个更加困难的解决方案。

我不需要添加复杂的形状，只需要一个空心圆圈和一个 X 。

我尝试使用笔画颜色和笔画宽度作为列样式添加空心圆，但我甚至无法使其工作。

以下是一个 jsFiddle，带有一个工作的空心圆圈，但我使用Javascript Literal添加数据的方式，无法获得以下代码：

  chartData.data.cols = [
 {
 id：someid，
 label：Some Label，
 type：number，
p：{
 style：'point {stroke-width：4; stroke-color：＃000000'，
}，
}，
]; 
  

我宁愿将它添加到 options.series [0] .strokeWidth strong>，但它看起来不是那种选择。

因此，如果你可以帮助空心圆点或者Xs，那真是太棒了！

解决方案基本上：当你想应用自定义样式时，你必须使用样式列，样式将通过列的值设置。

p> 使用对象文字的示例：

google.setOnLoadCallback（drawChart）; function drawChart（）{var chartData = {data：{cols：[{label：X，type：number}，{label：'Y'，type：number}，{role：'style'，type：string} ]，rows：[{c：[{v：1}，{v：5}，{v：'point {stroke-width：4;填充颜​​色：透明;笔画颜色：红色;}'}]}，{c：[{v：2}，{v：1}，{v：'point {stroke-width：4;填充颜​​色：透明; stroke-color：red;}'}]}，{c：[{v：3}，{v：3}，{v：'point {stroke-width：4;填充颜​​色：透明; stroke-color：red;}'}]}]}}; var options = {legend：'none'，curveType：'function'，pointSize：7}; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（new google.visualization.DataTable（chartData.data），options）;}

 < script type =text / javascriptsrc =https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization'， 'version'：'1.1'，'packages'：['corechart']}]}>< / script>< div id =chart_div>< / div>  
  

如果您使用多个vax，请立即添加角色为'style'的列你想要的风格。

另一种解决方案： b
$ b

通过CSS设置圆圈的样式：

  #chart_div circle {stroke-width：4px！important; fill：none！important;}＃chart_div circle [fill =＃ff0000] {stroke：＃ff0000！important;}＃chart_div circle [fill =＃0000ff] {stroke：＃0000ff！important;}  < script type =text / javascriptsrc =https： //www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}\"> < / script>< div id =chart_div>< / div>  

Is it possible to add a custom point shape to a line chart?

Google's Customizing Points Documentation doesn't mention anything about adding shapes they don't already offer.

I did find this similar question with a good answer, but I don't think I can do that using angular-google-chart. Even if it is possible, I'm hoping there is a more strait forward solution.

I don't need to add a complex shape, I just need a hollow circle and an X.

I tried adding the hollow circle using stroke-color and stroke-width as a column style, but I can't even get that to work.

Here is a jsFiddle with a working hollow circle but I'm using the Javascript Literal way of adding data and can't get the following code to work:

chartData.data.cols = [
        {
            id: "someid",
            label: "Some Label",
            type: "number",
            p: {
                style: 'point {stroke-width: 4; stroke-color: #000000',
            },
        },
    ];

I'd rather add it to to options.series[0].strokeWidth but it doesn't look like that is an option.

So, if you can help with either hollow circle points or Xs that be awesome!

解决方案

Basically: when you want to apply a custom style you must use a style-column, the style will be set via the value of the column.

Example using the object-literal:

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          role: 'style',
          type: "string"
        }

      ],
      rows: [{
        c: [{
          v: 1
        }, {
          v: 5
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 2
        }, {
          v: 1
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }, {
        c: [{
          v: 3
        }, {
          v: 3
        }, {
          v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}'
        }]
      }]
    }
  };
  
  var options = {
    legend: 'none',
    curveType: 'function',
    pointSize: 7

  };

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

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>

If you're using multiple vaxes then add the column with role: 'style' immediately after the column you want to style.

Another solution:

set the style of the circles via CSS:

google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = {

    data: {

      cols: [{

          label: "X",
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }, {
          label: 'Y',
          type: "number"
        }

      ],
      rows: [
             {c:[{v:1}, {v:5}, {v:4}]},
             {c:[{v:2}, {v:1}, {v:2}]},
             {c:[{v:3}, {v:3}, {v:5}]}
            ]
    }
  };


  var options = {
    curveType: 'function',
    pointSize: 7,
    series: {
      //set unique colors for the series when you must set
      //different points for mmultiple series
      0: {
        color: 'ff0000'
      },
      1: {
        color: '#0000ff'
      }
    }

  };

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

#chart_div circle {
  stroke-width: 4px !important;
  fill: none !important;
}
#chart_div circle[fill="#ff0000"] {
  stroke: #ff0000 !important;
}
#chart_div circle[fill="#0000ff"] {
  stroke: #0000ff !important;
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" ></div>

这篇关于Google图表LineChart自定义点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！