谷歌图表点颜色

时间:2012-09-27 13:27:57

标签: javascript charts google-visualization

是否可以在Google chart api中更改点颜色,如下所示:

从这个: Default

对此:enter image description here

谢谢!

3 个答案:

答案 0 :(得分:7)

尝试查看由asgallant jsFiddle Example

创建的here

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

答案 1 :(得分:6)

感谢您的建议。但是,系列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
           }
        }
}

答案 2 :(得分:1)

我通过在每个点上添加一个样式栏来解决该问题,如下所示:

enter image description here

SupervisorJob
相关问题