我使用了谷歌折线图，将线宽应用为 5px，但它不起作用。我使用了以下代码，
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
var options, data, chart;
$(function () {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var tweets_table = $('#tweet-table');
function getData() {
// Create array to hold our values for data table
// Each key is an array which represents a "row" of data
var values = [];
// get our values
$('#tweet-table tr').each(function (i, v) {
// Create a new "row"
values[i] = [];
// Get either th or td and loop
$(this).children('th,td').each(function (ii, vv) {
if ($(this).is('td.tweet-count')) {
// if we're looking at a numeric column be sure
// to pass a integar to the Chart API
values[i][ii] = parseFloat($(this).html());
} else {
// otherwise just get the text string
values[i][ii] = $(this).html();
}
});
});
return values;
}
function drawChart() {
var values = getData();
// Create the data table.
data = google.visualization.arrayToDataTable(values);
// Set chart options
options = {
'width': '100%',
'height': 500,
fontSize: 16,
fontName: 'Arial',
tooltip: {isHtml: true},
titlePosition: 'none',
colors: ['#000'],
areaOpacity: 0.1,
pointSize: 15,
pointShape: "circle",
chartArea: { width: '90%' },
lineWidth: 5,
legend: {
position: 'none'
},
hAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
format: '0.00',
minValue: -1 ,
},
vAxis: {
textStyle: {
fontSize:'16',
color:'#555555',
fontName: 'Arial'
},
titleTextStyle: {color: "#000",bold: "true",italic: "false"},
title: "Total sales",
gridlines: {
color: '#ddd',
count: 6
},
baselineColor: '#522fa1',
},
};
var formatter = new google.visualization.NumberFormat({prefix: '', negativeColor: 'red', negativeParens: true});
formatter.format(data, 0); // Apply formatter to first column
var formatter2 = new google.visualization.NumberFormat({ fractionDigits: 5});
formatter2.format(data, 1);
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
});
$(window).smartresize(function () {
chart.draw(data, options);
});
这是 html 代码，
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Charted Tweets</title>
<meta name="description" content="My Twitter RT's plotted on Google charts for netmag">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="author" content="David Smith">
<link rel="stylesheet" href="_/css/normalize.css">
<link rel="stylesheet" href="_/css/grid.css">
<link rel="stylesheet" href="_/css/typo.css">
<link rel="stylesheet" href="_/css/bootstrap.min.css">
<link rel="stylesheet" href="_/css/site.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<body class="">
<div class="page">
<h1>Tweets by <a href="http://www.twitter.com/get_dave" target="_blank">@get_dave</a> by date</h1>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="position: relative; ">
</div>
<table class="table table-striped" id="tweet-table">
<caption>@get_dave's Tweets by date</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Tweets</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tweet-date">03/03/12</td>
<td class="tweet-count">2</td>
</tr>
<tr>
<td class="tweet-date">04/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">05/03/12</td>
<td class="tweet-count">1</td>
</tr>
<tr>
<td class="tweet-date">06/03/12</td>
<td class="tweet-count">8</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">4</td>
</tr>
<tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr><tr>
<td class="tweet-date">07/03/12</td>
<td class="tweet-count">0</td>
</tr>
<tr>
<td class="tweet-date">08/03/12</td>
<td class="tweet-count">3</td>
</tr>
</tbody>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="_/js/debounce.js"></script>
<script src="_/js/functions.js"></script>
</body></html>
我的输出是
在输出中，基线上的线宽比其他线宽要浅。我需要均衡所有地方的线宽..
最佳答案
问题是水平轴干扰了您的线条。这是由于垂直轴的最小值所致。
我玩了一个 jsfiddle复制该问题。请注意 vAxis 参数上的 minValue: -1。看起来你把它放在了 hAxis 上。
var options = {
lineWidth: 5,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity',
minValue: -1
}
};
关于javascript - 线宽在谷歌折线图中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37187814/