javascript - Google チャート ポイントの色

Question

次のように、GoogleチャートAPIでポイントの色を変更することは可能ですか:

これから：

これに：

ありがとう！

Answer 1

ここでasgallant によって作成されたこのjsFiddle の例を見てみてください

「同じシリーズで線とデータ ポイントを異なる色にするための API のサポートはありません。しかし、データを 2 つの列で繰り返す DataView を使用して、必要なものを偽造することができます。最初のシリーズを「黒」にします。 ' そして 2 番目の色は、lineWidth = 0 および pointSize > 0 の 'red' です。"

例から：

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

Answer 2

提案ありがとう。ただし、シリーズ1は機能しません。次のコードでは、線が青で印刷されますが、ポイントは表示されません。1と0を切り替えると、ポイントは赤で表示されますが、線がありません。シリーズの代わりに、hAxisの直後にpointSize：4がありました。同じ色の点と線を除いて、それはうまくいきました。

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