Question

我使用了谷歌折线图，将线宽应用为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

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

Answer 1

问题是横轴干扰了你的线。这是由于垂直轴的最小值。

我玩了jsfiddle来复制这个问题。注意vAxis参数上的minValue：-1。看起来你把它放在了hAxis上。

var options = {
    lineWidth: 5,
    hAxis: {
      title: 'Time'          
    },
    vAxis: {
      title: 'Popularity',
      minValue: -1
    }
  };

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

1 个答案: