Что является эквивалентом свойства chls для пунктирной линии в API Google Maps JS? - PullRequest
Новая
       0

Что является эквивалентом свойства chls для пунктирной линии в API Google Maps JS?

2 голосов
/ 05 февраля 2012

Мне нужен эквивалент chls свойства, чтобы можно было рисовать пунктирные диаграммы с помощью API JavaScript, как параметр chls в обычном API Google Chart.

Я попробовал данные трюки здесь , но у меня это не работает.

Это мой фактический код: 

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

Ответы [ 2 ]

3 голосов
/ 19 февраля 2012

Хорошо, это неудобное решение, потому что я не мог найти нигде в API визуализации, чтобы сделать это.(Я думаю, что должно быть, потому что, если вы будете искать через javascript, вы получите какой-то запутанный код Google, в котором упоминается 'stroke-dasharray') *

Но вот возможное решение:Используйте свойство stroke-dasharray css для <path>:

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

Чтобы это работало, вам необходимо добавить css <link> к <head><iframe>, который создает API визуализации Google:

Поместите это в конец вашей функции создания: 

    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>, чтобы добавить к ним штрих-черточку и создать собственную небольшую подкаркас.

0 голосов
/ 28 февраля 2012

Я получил ту же проблему, пытаясь найти и найти ваше решение.Тем не менее, я не могу понять, как отображать только выбранную линию в виде пунктирной линии.Но я обнаружил экспериментальную ролевую функциональность .При этом вы можете моделировать пунктирную линию.Ниже приведена игровая площадка по умолчанию версия.Изменен тип диаграммы на 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 используется для заполнения новых столбцов.

В результате отобразятся две пунктирные линии

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...