javascript - google chart JS API中虚线的chls属性等于什么？

我需要等效的chls属性，以便能够像普通Google图表API中的chls参数一样使用JavaScript API绘制虚线图表。

我已经尝试过given tricks here，但它对我不起作用。

这是我的实际代码：

<!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>

最佳答案

好的，这是一个不方便的解决方案，因为在Visualization API中找不到任何地方可以做到这一点。（我认为一定是有原因的，因为如果您通过javascript搜索，就会想到一些模糊的Google代码，其中提到了“ stroke-dasharray”）

但这是一个可能的解决方案：

对<path>使用stroke-dasharray css属性：

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

为了使其正常工作，您需要在Google可视化api创建的<link>的<head>的<iframe>后面添加一个CSS <path>：

将其放在create函数的末尾：

    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数组来与您的数据对象和实际的元素相关联，以向它们添加stroke-dasharray，并创建一个自己的子框架。