gpt4 book ai didi

javascript - 线宽在谷歌折线图中不起作用

转载 作者:行者123 更新时间:2023-11-28 06:02:17 27 4
gpt4 key购买 nike

我使用了谷歌折线图,将线宽应用为 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&#39;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>

我的输出是 here

在输出中,基线上的线宽比其他线宽要浅。我需要均衡所有地方的线宽..

最佳答案

问题是水平轴干扰了您的线条。这是由于垂直轴的最小值所致。

我玩了一个 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com