更改數據標題的顏色（Google可視化）

Question

我正在嘗試更改折線圖的顏色（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}}
          );
}

另一個問題這是我目前的工作，但為什么我看到-即使沒有數字低於0，也有500萬？

我的代碼：

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'} },
                }
        );

}

Answer 1

讓我們將您的問題分為兩部分。

自定義您的圖例

對於第一個問題， 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百萬水平軸值，可以將vAxis.minValue設置為0。因此將它們放在一起：

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'} },
});

Answer 2

這對我有用。 查看下面的“傳奇”屬性。

options='{"title": "Abandoned Carts",
              "backgroundColor" : "transparent",
              "pieHole": "0.4",
              "legend" : { "textStyle" : { "color" : "white"} }
              }'