線寬在谷歌折線圖中不起作用

我已經使用谷歌折線圖，將線寬應用爲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

在輸出，在基線線寬打火機比其他線寬。我需要在所有地方均衡線寬。

來源

2016-05-12 KMS

您是在談論線圖本身的寬度還是x軸的寬度和顏色？ –

對不起，我感到困惑..我問的圖形數據線（深黑色線）的寬度。我爲此應用了5 px寬度。但這甚至在所有地方都沒有。當你看到輸出時，最後的第二行有較淺的寬度放在圖形基線上。但其他圖形數據線是大膽的..我想使它也大膽..這是有道理的？ – KMS

問題在於水平軸干擾了您的線條。這是由於垂直軸的最小值。我玩過jsfiddle複製這個問題。注意vAxis參數的minValue：-1。它看起來像你把它放在hAxis上。

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

來源

2016-05-13 13:48:02

謝謝..它工作得非常好...非常感謝..！ – KMS

線寬在谷歌折線圖中不起作用

回答

相關問題