谷歌图表点颜色答案

【问题标题】：Google chart point color谷歌图表点颜色
【发布时间】：2012-09-27 13:27:57
【问题描述】：

是否可以在 Google 图表 api 中更改点颜色，如下所示：

从这里：

对此：

谢谢！

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

试着看看这个由 asgallant here 创建的 jsFiddle Example

“API 中不支持使同一系列中的线条和数据点具有不同的颜色。但是您可以伪造您想要的 , 通过使用 DataView 并在两列中重复您的数据。使第一个系列颜色为“黑色”，第二个系列颜色为“红色”，lineWidth = 0 和 pointSize > 0。"

来自示例：

var options = {
        title: 'Load vs Length',
        titlePosition: 'out',
        legend: {
            position: 'none'
        },
        hAxis: {
            title: 'Length (inch)',
            viewWindow: {
                min: 0
            },
            format: '#.000'
        },
        vAxis: {
            title: 'Load (pound)',
            viewWindow: {
                min: 0
            }
        },
        series: { //Create 2 separate series to fake what you want. One for the line             and one for the points
            0: {
                color: 'black',
                lineWidth: 2
            },
            1: {
                color: 'red',
                lineWidth: 0,
                pointSize: 5
            }
        }

【讨论】：

谢谢，Google 提供一个简单的 pointColor 会很好，但无论如何...干杯，对我有用！
是的，应该有更简单的方法，但我想他们不想为相交线引入任何混淆。很高兴它有帮助！ =)
我们可以对多行图表做同样的事情吗？

【解决方案2】：

感谢您的建议。但是，系列 1 对我不起作用：以下代码，打印蓝色线但不显示点。如果我切换 1 和 0。然后它会以红色显示点，但没有线。之前而不是系列，我只有 pointSize: 4，就在 hAxis 之后。这行得通，除了相同颜色的点和线。

{title: 'progress',

  vAxis: {
          title: 'Grade',  
          titleTextStyle: {color: 'red'}, 
          gridlines: {count: 7}, 
          viewWindow: { min: 0, 
                        max: 100, 
                        valueLabelsInterval: 20}
        },

  hAxis: {
          title: 'Q date',  
          titleTextStyle: {color: 'red'}, 
          slantedText: true
        },

  series: {
          0: {lineWidth: 2},
          1: {
             color: 'red',
             lineWidth: 0,
             pointSize: 4
           }
        }
}

【讨论】：

我们可以对多行图表做同样的事情吗？

【解决方案3】：

我通过向每个点添加单独的样式列来解决问题，如下所示：

  var data_timeline = new google.visualization.DataTable();
  data_timeline.addColumn('string', 'Year'); // Implicit domain label col.
  data_timeline.addColumn('number', 'Students'); // Implicit series 1 data col.
  data_timeline.addColumn({type:'string', role:'annotation'}); // annotation role col.
  data_timeline.addColumn({type:'string', role:'style'}); // style col.      
  data_timeline.addRows([
    ['2010-2011', 85, '85', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
    ['2011-2012', 67, '67', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
    ['2012-2013', 34, '34', 'point { size: 7; shape-type: diamond; fill-color: #005b82; }'],
  ]);      

  var options_timeline = {
    hAxis: { textStyle: { color: '#444444'} },
    vAxis: { baselineColor: '#cccccc', textPosition: 'none', minValue: 0 },
    legend: {position: 'none'},
    lineWidth: 3,
    pointsVisible: true,
    colors: ['#b7c72a'],
  };

  var chart_timeline = new google.visualization.LineChart(document.getElementById('chart_timeline'));
  chart_timeline.draw(data_timeline, options_timeline);

【讨论】：