我正在尝试更改折线图(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'} },
}
);
最佳答案
让我们将您的问题分成两部分。
自定义您的图例
对于您的第一个问题,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'} },
});
完成此操作后,您可以通过与 map 本身交互来创建自己的图例:
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'} },
});
关于javascript - 改变数据标题的颜色(谷歌可视化),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14341673/