2016-11-30 28 views
2

我如何更改此代碼以獲得lineWidth的工作?LineWidth不會更改谷歌圖表

<html> 
<head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
</head> 
<body> 
    <table> 
    <tr> 
     <td>k: </td> 
     <td><input id="k" type="number" value="2.2" min="0" max="10" step="0.1" /></td> 
    </tr> 
    <tr> 
     <td>lambda: </td> 
     <td><input id="lambda" type="number" value="7.6" min="0" max="10" step="0.1" /></td> 
    </tr> 
    </table> 

    <p id="message"> </p> 
    <div id="chart_weights"></div> 

    <script type="text/javascript"> 
    google.charts.load('current', { 
     'packages': ['line'] 
    }); // load the visualisation API and corechart package 
    google.charts.setOnLoadCallback(UpdateValues); // set a callback to run when the Google Visualization API is loaded 

    // Callback that creates and populates a data table, instantiates the chart, passes in the data and draws it. 
    function drawChart() { 
     if (!google.visualization) { 
     return; 
     } 
     // Create the data table for the symbol in question. 
     var data = new google.visualization.DataTable(); 

     data.addColumn('number', ''); 
     data.addColumn('number', 'lambda'); 

     data.addRows(weight); 
     var options = { 
     lineWidth: 10, 
     width: 550, 
     height: 288, 
     legend: { 
      position: 'none' 
     }, 
     colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', 
      '#f6c7b6' 
     ] 
     }; 
     //data.addRows(number); 
     //console.log(type(data)); 

     var chart = new google.charts.Line(document.getElementById(
     'chart_weights')); 
     chart.draw(data, options); 
    } 

    var weight = []; 

    function UpdateValues() { 
     weight = []; 
     var k = document.getElementById("k").value; 
     var lambda = document.getElementById("lambda").value; 
     for (var x = 0.1; x < 20; x++) { 
     weight.push([x, k * Math.pow(x/lambda, k - 1) * Math.exp(- 
      Math.pow(x/lambda, k))/lambda]); 
     document.getElementById("message").innerHTML = weight; 
     } 
     drawChart(); 
    } 

    UpdateValues(); 

    document.getElementById("k").addEventListener("click", function() { 
     UpdateValues(); 
    }); 

    document.getElementById("lambda").addEventListener("click", function() { 
     UpdateValues(); 
    }); 

    </script> 
</body> 

</html> 

回答

0

正在繪製圖表是材料圖表

google.charts.Line - >'packages': ['line']

還有很多根本就沒有上材料工作圖表
包括lineWidth

選項

看到這個問題 - >Tracking Issue for Material Chart Feature Parity #2143

使用核心圖表,而不是

google.visualization.LineChart - >'packages': ['corechart']

有改變核心的外觀和感覺圖表類似於材料的選擇

theme: 'material'