谷歌图表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属性的等效值是什么？

回答

相关问题