4

折れ線グラフ (Google ビジュアライゼーション) の色を変更しようとしています。それは機能しますが、「猫」のテキストの色を変更する方法がわかりません。 ここに画像の説明を入力

ここで説明されているのは何ですか？https://developers.google.com/chart/interactive/docs/gallery/linechart

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}

もう 1 つの質問 これは私の現在の作業ですが、0 未満の数値がないのに - 5 mil と表示されるのはなぜですか?

ここに画像の説明を入力

私のコード:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
                curveType: "function",
                width: 900, height: 300,
                vAxis: {minValue:0},
                colors: ['#769dbb'], //Line color
                backgroundColor: '#1b1b1b',
                hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
                vAxis: { textStyle: {color: '#767676'} },
                }
        );

}

</p>

4

2 に答える 2

6

質問を2つの部分に分けてみましょう。

凡例のカスタマイズ

最初の質問ですが、APIドキュメントでは、凡例自体に直接アクセスすることはできません。問題を解決する最善の方法は、デフォルトの凡例をオフにすることから始めることだと思います。

var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
    legend: { position: "none" }, // turn off the legend
    curveType: "function",
    width: 900, height: 300,
    vAxis: {minValue:0},
    colors: ['#769dbb'], //Line color
    backgroundColor: '#1b1b1b',
    hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
    vAxis: { textStyle: {color: '#767676'} },
});

これを完了すると、マップ自体を操作して独自の凡例を作成できます。

google.visualization.events.addListener(chart, 'ready', drawCustomLegend);

チャートイベントの処理に関するドキュメントと、この質問を確認してください。

軸寸法の構成

-5百万の横軸の値を削除するには、を0に設定します。vAxis.minValueしたがって、すべてをまとめると、次のようになります。

var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
    legend: { position: "none" }, // turn off the legend
    curveType: "function",
    width: 900, height: 300,
    vAxis: {minValue:0},
    colors: ['#769dbb'], //Line color
    backgroundColor: '#1b1b1b',
    hAxis: { textStyle: {color: '#767676'  , fontSize: 11} },
    vAxis: { minValue: 0, textStyle: {color: '#767676'} },
});
于 2013-01-15T16:24:51.223 に答える