谷歌圖表JS API中虛線的chls屬性的等效值是什麼？

我需要相當於chls屬性才能使用JavaScript API繪製虛線折線圖，如chls參數在常規Google圖表API中所做的操作。我試過given tricks here，但它對我不起作用。谷歌圖表JS API中虛線的chls屬性的等效值是什麼？

這是我的實際代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://www.google.com/jsapi"></script> 
    <script> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 

       data.addColumn('string', "Nombre d'exécution du programme"); 

     data.addColumn('number', 'Création du graphe pour 10 exécutions'); 
     data.addColumn('number', 'Resolution de Dijkstra pour 10 exécutions'); 

     data.addColumn('number', 'Création du graphe pour 100 exécutions'); 
     data.addColumn('number', 'Resolution de Dijkstra pour 100 exécutions'); 

     data.addColumn('number', 'Création du graphe pour 1000 exécutions'); 
     data.addColumn('number', 'Resolution de Dijkstra pour 1000 exécutions'); 

     data.addColumn('number', 'Création du graphe pour 10000 exécutions'); 
     data.addColumn('number', 'Resolution de Dijkstra pour 10000 exécutions'); 

     data.addColumn('number', 'Création du graphe pour 100000 exécutions'); 
     data.addColumn('number', 'Resolution de Dijkstra pour 100000 exécutions'); 

     data.addRows([ 
      ['1', // Nombre de tests 
      911.111111111111, 981.507773124157, // 10 exécutions 
      5916.34265646557, 8652.74074074074, // 100 
      15873.293352048, 38374.6331504402, // 1000 
      20583.9468919734, 54833.2671045558, // 10000 
      21731.123388582, 62344.9206884914, // 100000 
      ], 
      ['10', 
      660.045054269916, 873.872505846266, // 10 
      1479.11974962178, 3809.3591031963, // 100 
      2365.02966174325, 5291.4404255426, // 1000 
      2489.9768981046, 6026.41413062173, // 10000 
      74966.0679996439, 6855.2716011857, // 100000 
      ], 
      ['100', 
      257.002598902686, 449.898770994325, // 10 
      1117.85291997813, 664.696852512432, // 100 
      411.255444801189, 706.801182419083, // 1000 
      502.157411124161, 4589.16141015407, // 10000 
      8347.894845246, 5269.57442418582, // 100000 
      ], 
      ['1000', 
      147.489910803794, 154.020514119286, // 10 
      146.285394503668, 165.264695318371, // 100 
      178.955165911359, 534.771450920607, //1000 
      895.70893745921, 690.426997324878, // 10000 
      1436.27709770908, 1631.77983702272, // 100000 
      ], 
      ['10000', 
      104.714581363082, 106.393139452612, // 10 
      112.895078296546, 109.63484225748, // 100 
      233.803672029444, 246.491106857861, //1000 
      506.280370709875, 232.445295937225, // 10000 
      570.571422701139, 412.694573393414, // 100000 
      ] 
     ]); 

     var options = { 
      width: "100%", height: "1000", 
      title: 'C# - TEMPS MAXIMUM', 
       colors: [ 
      '#2A00FF', '#2A00FF', 
      '#2BFF00', '#2BFF00', 
      '#FFEA00', '#FFEA00', 
      '#FF8C1A', '#FF8C1A', 
      '#FF0000', '#FF0000', 
      '#B30000', '#B30000' 
      ], 
      vAxis: { 
      title: '% par rapport à la moyenne', 
      viewWindowMode: 'explicit', 
      viewWindow: { 
       //max: 8000, 
       min: 100, 
      }, 
      gridlines: { 
       count: 18, 
      } 
      }, 
      hAxis: { 
      title: "Nombre de résolution d'algorithme Dijkstra (avec création du graphe)", 
      }, 
      series: {0:{lineWidth: '1'}, 1:{lineWidth: '2'}, 
        2:{lineWidth: '1'}, 3:{lineWidth: '2'}, 
        4:{lineWidth: '1'}, 5:{lineWidth: '2'}, 
        6:{lineWidth: '1'}, 7:{lineWidth: '2'}, 
        8:{lineWidth: '1'}, 9:{lineWidth: '2'}, 
        10:{lineWidth: '1'}, 11:{lineWidth: '2'} 

      } 

     }; 

     var chart = new google.visualization.LineChart(document.getElementById('average')); 

     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="average"></div> 
    </body> 
</html>

來源

2012-02-05 alain.janinm

您的代碼提供了以下錯誤（見http://jsfiddle.net/ZZ25U/）：未捕獲的錯誤：「格式+連接，默認情況下，corechart.I.js： 54Uncaught錯誤：給出的行大小不等於10（表中的列數）。「 – graphicdivine 2012-02-19 17:01:57

對不起，我刪除了一行...請參閱編輯，謝謝。新增了'data.addColumn（'string'，「Nombre d'exécutiondu program」）;'第一。 – 2012-02-19 17:11:10

好吧，這是不方便的解決方案，因爲我不能在Visualization API的任何地方發現做到這一點。（我認爲必須有雖然，因爲如果通過JavaScript的搜索，你拿出的是提到「中風dasharray」一些混淆谷歌代碼）

但這裏有一個可能的解決方案：

使用行程dasharray爲<path> CSS屬性：

https://developer.mozilla.org/en/SVG/Attribute/stroke-dasharray

爲了得到這個工作，你需要一個css <link>追加到谷歌可視化API創建的<head>：

在您創建函數的末尾將這個：

chart.draw(data, options); 

    var cssLink = document.createElement('link'); 
    cssLink.href = "chart.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css"; 
    frames[0].document.head.appendChild(cssLink);

}

創建的相同目錄下chart.css，並把這個進去：

path{stroke-dasharray:5,5}

而且你：http://vigrond.com/test/strokedasharray.php

我會留給你決定哪條路有破折號。我相信你可以做一些javascript數組來關聯你的數據對象和實際的<path>元素來爲它們添加stroke-dasharray，並創建一個你自己的子框架。

來源

2012-02-19 18:08:57 Vigrond

非常感謝！我必須等待24小時的賞金賞金;） – 2012-02-19 18:35:10

太好了，謝謝！很高興我能幫上忙 – Vigrond 2012-02-19 18:35:59

我得到了同樣的問題，試圖找到並找到您的解決方案。但是，我似乎無法弄清楚如何只顯示一條選定的虛線。但我發現一個experimental role functionality。有了這個，你可以模擬虛線。以下是default playground版本。將圖表類型更改爲LineChart而不是BarChart。新的代碼變爲：

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawVisualization); 
    function drawVisualization() { 
     // Create and populate the data table. 
     var data = new google.visualization.DataTable(); 
     var line_data = [true, false, true, false]; 
     var raw_data = [ 
      ['Austria', 1336060, 1538156, 1576579, 1600652, 1968113, 1901067], 
      ['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206], 
      ['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965], 
      ['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036] 
     ]; 

     var years = [2003, 2004, 2005, 2006, 2007, 2008]; 

     data.addColumn('string', 'Year'); 
     for (var i = 0; i < raw_data.length; ++i) { 
      data.addColumn('number', raw_data[i][0]); 
      data.addColumn({type:'boolean',role:'certainty'}); 
     } 


     data.addRows(years.length); 

     for (var j = 0; j < years.length; ++j) { 
      data.setValue(j, 0, years[j].toString()); 
     } 
     for (var i = 0; i < raw_data.length; ++i) { 
      for (var j = 1; j < raw_data[i].length; ++j) { 
       data.setValue(j-1, (i*2)+1, raw_data[i][j]); 
       data.setValue(j-1, (i*2)+2, line_data[i]); 
      } 
     } 

     // Create and draw the visualization. 
     new google.visualization.LineChart(document.getElementById('chart_div')). 
       draw(data, 
       {title:"Yearly Coffee Consumption by Country", 
        width:600, height:400, 
        vAxis: {title: "Year"}, 
        hAxis: {title: "Cups"}} 
     ); 
    } 
</script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</body> 
</html>

我已經定義了一個line_data陣列布爾值。 True表示實線，false表示虛線。在第一個循環中，我將添加角色爲certainty的新列。在雙循環中，調整i的值以填充正確的單元格。 line_data用於填充新列。

結果會顯示兩條虛線

來源

2012-02-28 15:36:15 Postie

谷歌圖表JS API中虛線的chls屬性的等效值是什麼？

回答

相關問題