更改数据标题的颜色(Google Visualization)

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

}

​

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

查看有关处理图表事件的文档以及此问题.

配置轴尺寸

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