javascript - 谷歌图表 JS API 中虚线的 chls 属性等效于什么？-6ren

javascript - 谷歌图表 JS API 中虚线的 chls 属性等效于什么？

转载作者：行者123 更新时间：2023-11-29 20:11:59

我需要 chls 的等价物属性，以便能够使用 JavaScript API 绘制虚线图表，就像常规 Google 图表 API 中的 chls 参数一样。

我试过 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，你会得到一些提到“stroke-dasharray”的模糊谷歌代码)

但这里有一个可能的解决方案:

为 <path> 使用 stroke-dasharray css 属性:

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

为了使其正常工作，您需要附加一个 css <link>到 <head>的 <iframe>谷歌可视化 API 创建:

将其放在创建函数的末尾:

    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，并创建一个你自己的小子框架。

关于javascript - 谷歌图表 JS API 中虚线的 chls 属性等效于什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9148711/

文章推荐： Android相对布局点击优先级

文章推荐： android - 无法访问预加载的 SQLite 数据库文件

lisp - CHLS“最里面的反引号形式应首先扩展”的含义
CLHS on backquotesstates“如果反引号语法是嵌套的，则应首先展开最里面的反引号表单这意味着，如果一行出现多个逗号，最左边的逗号属于最里面的反引号。” 但是当我在SBCL中计算下列
javascript - 谷歌图表 JS API 中虚线的 chls 属性等效于什么？
我需要 chls 的等价物属性，以便能够使用 JavaScript API 绘制虚线图表，就像常规 Google 图表 API 中的 chls 参数一样。我试过 given tricks here但

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 谷歌图表 JS API 中虚线的 chls 属性等效于什么？