谷歌图表 JS API 中虚线的 chls 属性相当于什么？

发布于 2025-01-02 19:29:06 字数 4650 浏览 5 评论 0原文

我需要相当于 chls 属性能够使用 JavaScript API 绘制点线图，就像常规 google 图表 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>

原文

I need the equivalent of chls property to be able to draw dotted line charts with the JavaScript API like the chls parameter does in the regular google chart API.

I've tried the given tricks here but it doesn't work for me.

This is my actual code :

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年少掌心 2025-01-09 19:29:06

好的，这是一个不方便的解决方案，因为我无法在可视化 api 中找到执行此操作的任何位置。（我认为肯定有，因为如果你搜索 javascript，你会得到一些提到“行程-dasharray”的模糊谷歌代码）

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

对 < 使用行程-dasharray css属性路径>：

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

为了使其正常工作，您需要附加一个 css < link> 到 Google 可视化 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);

}

Create一个在同一目录中添加 Chart.css 并将其放入其中：

path{stroke-dasharray:5,5}

您拥有： http://vigrond.com/ test/Strokedasharray.php

我将由您决定哪些路径有破折号或没有破折号。我确信您可以做一些 javascript 数组来与您的数据对象和实际的元素相关联，以向它们添加中风破折号数组，并创建您自己的一个小子框架。

Ok, this is a inconvenient solution because I could not find anywhere in the Visualization api to do this. (I think there must be though, because if you search through the javascript, you come up with some obfuscated google code that mentions 'stroke-dasharray')

But here's a possible solution:

Use stroke-dasharray css property for <path>:

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

In order to get this to work, you'll need to append a css <link> to the <head> of the <iframe> that google visualization api creates:

Put this at the end of your create function:

    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);

}

Create a chart.css in the same directory and put this into it:

path{stroke-dasharray:5,5}

And you have: http://vigrond.com/test/strokedasharray.php

I will leave it up to you to decide which paths have a dash or not. I am sure you can do some javascript arrays to correlate with your data object and the actual <path> elements to add stroke-dasharray to them, and create a little sub-framework of your own.

回复收藏 0 原文

絕版丫頭 2025-01-09 19:29:06

我遇到了同样的问题，试图找到并找到你的解决方案。但是，我似乎无法弄清楚如何仅将选定的线显示为虚线。但我发现了一个实验性角色功能。这样您就可以模拟虚线。以下是默认 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 表示虚线。在第一个循环中，我添加了具有确定性角色的新列。在双循环中，调整i的值以填充正确的单元格。 line_data 用于填充新列。

结果将显示两条虚线

I got the same problem, trying to find and found your solution. However, I can't seem to figure out how to display only a selected line as a dashed line. But I found an experimental role functionality. With that you can simulate the dashed line. Below is a default playground version. Changed the chartype to LineChart instead of BarChart. The new code becomes:

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

I've defined a line_data array with booleans. True means solid, false means dashed. In the first loop I'm adding the new column with the role certainty. In the double loop, the value of i is adjusted to fill the correct cell. line_data is used to fill the new columns.

The result will show two dashed lines

回复收藏 0 原文

~没有更多了~