改变数据标题的颜色（谷歌可视化）答案

【问题标题】：change color of data title (Google Visualization)改变数据标题的颜色（谷歌可视化）
【发布时间】：2013-01-15 16:00:02
【问题描述】：

我正在尝试更改折线图的颜色（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}}
          );
}

另一个问题这是我目前的工作，但为什么我看到 - 500 万，即使没有低于 0 的数字？

我的代码：

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

}

【问题讨论】：

标签： javascript colors google-visualization linechart

【解决方案1】：

让我们把你的问题分成两部分。

自定义您的图例

对于您的第一个问题，API documentation 并没有真正让我们直接访问图例本身。我认为解决您的问题的最佳方法是从关闭默认图例开始：

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);

查看documentation on handling chart events，以及this question。

配置轴尺寸

要删除 -500 万水平轴值，您可以将 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'} },
});

【讨论】：

非常感谢，因为你说它叫传奇，所以我搜索并找到了。 legend.textStyle
是的，legend.textStyle 是您想要的，如果您希望图例中的所有元素具有统一的样式。您需要自定义图例来进行更细粒度的配置。
我加了hAxis: { minValue: 0 }，但我还是看到了
我的错。将您的 minValue 更改为 vAxis。编辑我的答案。
嗯。文档确实提到minValue 实际上是“minValue 选项值或最低数据值，向下舍入到下一个较低的网格标记”的最小值。您的最低图表值是否

【解决方案2】：

这对我有用。查看下面的“legend”属性。

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

【讨论】：