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

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

另一个问题这是我目前的工作，但为什么我看到 - 5 百万即使没有低于 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'} },
                }
        );

}

​</p>

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

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

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