При создании изображения аннотации диаграммы Google перемещаются назад. - PullRequest
Новая
       21

При создании изображения аннотации диаграммы Google перемещаются назад.

0 голосов
/ 19 февраля 2019

Я работаю над проектом, который нужно сохранить в виде диаграммы Google.Но при преобразовании в изображение с помощью метода chart.getImageURI () сгенерированная строка base64 заставляет аннотации двигаться назад.пожалуйста, проверьте прикрепленный фрагмент кода.

Я проверил документацию, но также не смог найти там ничего.Я также пробовал свойства "AlwaysOutside: true" и "z-index:".

У кого-нибудь есть идеи? 

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Age');
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotationText' });
        data.addColumn('number', 'Value');
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotationText' });
        data.addColumn('number', 'Total');
        data.addColumn('number', 'Other Total');

        data.addRows([
          [50,  null, null,           89561,  null, null, null,           184298, 184298],
          [51,  null, null,           95600,  null, null, null,           188500, 188500],
          [52,  null, null,           101900, null, null, null,           192900, 188900],
          [53,  'T',  null,           108400, null, null, null,           197700, 191300],
          [54,  null, null,           115200, null, null, null,           202700, 193900],
          [57,  null, null,           136900, null, null, null,           219400, 202200],
          [58,  null, null,           144600, null, null, null,           225500, 205100],
          [59,  null, null,           152600, 'X',  null, null,           231900, 208200],
          [60,  null, null,           160900, null, null, null,           238700, 211300],
          [64,  null, null,           197100, null, null, null,           268900, 225000],
          [65,  null, null,           206500, null, null, null,           276900, 228300],
          [66,  'P',  'First Point',  0,      null, null, null,           236000, 186800],
          [67,  null, null,           0,      null, null, null,           195100, 145600],
          [68,  null, null,           0,      null, null, null,           154400, 104600],
          [69,  null, null,           0,      null, null, null,           113700, 63700],
          [70,  null, null,           0,      null, null, null,           73100,  23100],
          [71,  null, null,           0,      null, null, null,           32500,  0],
          [72,  null, null,           0,      '',   'S',  'Second Point', 0,      0],
          [73,  null, null,           0,      null, null, null,           0,      0],
          [74,  null, null,           0,      null, null, null,           0,      0],
          [78,  null, null,           0,      null, null, null,           0,      0],
          [79,  null, null,           0,      null, null, null,           0,      0],
          [80,  null, null,           0,      null, null, null,           0,      0],
          [81,  null, null,           0,      null, null, null,           0,      0],
          [82,  'L',  'Last Point',   0,      null, null, null,           0,      0],
          [83,  null, null,           0,      null, null, null,           0,      0],
          [84,  null, null,           0,      null, null, null,           0,      0],
          [85,  null, null,           0,      null, null, null,           0,      0],
          [86,  null, null,           0,      null, null, null,           0,      0],
          [87,  null, null,           0,      null, null, null,           0,      0],
        ]);

        var options = {
          title: "Value Test",
          seriesType: "area",
          chartArea: {
            left: 90,
            top: 40
          },
          hAxis: {
            gridlines: {
              color: "transparent"
            },
            format: "0",
            viewWindow: {
              max: 105
            }
          },
          height: 400,
          width: 620,
          focusTarget: "category",
          displayAnnotations: true,
          series: {
            0: {
              color: "#9DCF7B",
              areaOpacity: 1

            },
            1: {
              color: "#0184A8"
            },
            2: {
              type: "line",
              color: "#F8E38A"

            }
          },
          annotations: {
            textStyle: {
              fontSize: 14,
              bold: true,
              italic: false,
              color: "black"              
            }
          }
        };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      google.visualization.events.addListener(chart, 'ready', function () {
      document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
    });
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width:400; height:600"></div>
    <div>Image</div>
    <div id="image_div"></div>
  </body>
</html>

Вот диаграмма типа бара, которая вызывает у меня ту же проблему.Все еще пытаюсь .... 

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

    google.charts.load('current', { 'packages': ['corechart'] });

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Age');
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotationText' });
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotationText' });
      data.addColumn('number', 'MainValue');
      data.addColumn('number', 'Secondary');
      data.addColumn('number', 'Other');
      data.addColumn('number', 'Requered');
      data.addColumn('number', 'RequiredCapacity');

      data.addRows([

        [60, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [61, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [62, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [63, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [64, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [65, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [66, 'R', 'Rate 66', null, null, null, 0, 0, 0, 40036, 40036],
        [67, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [68, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [69, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [70, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [71, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [72, null, null, '', 'T', 'Texture', 0, 0, 0, 32162, 40036],
        [73, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [74, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [75, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [76, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [77, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [78, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [79, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [80, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [81, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [82, 'L', 'Lowest', null, null, null, 0, 0, 0, 0, 40036],
        [83, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [84, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [85, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [86, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [87, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [88, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [89, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [90, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [91, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [92, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [93, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [94, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [95, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [96, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [97, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [98, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [99, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [100, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [101, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [102, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [103, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [104, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [105, null, null, null, null, null, 0, 0, 0, 0, 40036]
      ]);

      var options = {
        title: "test2",
        seriesType: "bars",
        bar: {
          groupWidth: "80%"
        },
        chartArea: {
          left: 90,
          top: 40
        },
        hAxis: {
          gridlines: {
            color: "transparent"
          },
          format: "0",
          viewWindow: {
            max: 105
          }
        },
        height: 400,
        width: 620,
        focusTarget: "annotation",
        displayAnnotations: true,
        series: {
          0: {
            color: "#F8E38A"
            , lineWidth: 2
          },
          1: {
            color: "#9DCF7B"
          },
          2: {
            color: "#1F88A7"
          },
          3: {
            color: "#B2DAE5"
          },
          4: {
            type: "line",
            color: "grey",
            lineWidth: 1
            , lineDashStyle: [
              10,
              2
            ]
          }
        },
        annotations: {
          textStyle: {
            fontSize: 14,
            bold: true,
            italic: false,
            color: "black"
          }
        }
        , isStacked: true
      };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      google.visualization.events.addListener(chart, 'ready', function () {
        document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
      });
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="chart_div" style="width:400; height:600"></div>
  <div>Images</div>
  <div id="image_div"></div>
</body>

</html>

1 Ответ

0 голосов
/ 19 февраля 2019

должно быть ошибкой с -> getImageURI()

, но вы можете вручную создать свой собственный образ ... 

  var chartContainer = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(chartContainer);
  google.visualization.events.addListener(chart, 'ready', function () {
    var svg = chartContainer.getElementsByTagName('svg')[0];
    var svgContent = new XMLSerializer().serializeToString(svg);
    var domURL = window.URL || window.webkitURL || window;
    var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
    var image = document.getElementById('image_div').appendChild(new Image());
    image.src = imageURL;
  });

см. Следующие рабочие фрагменты ... 

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

    google.charts.load('current', { 'packages': ['corechart'] });

    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Age');
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotationText' });
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotation' });
      data.addColumn({ type: 'string', role: 'annotationText' });
      data.addColumn('number', 'MainValue');
      data.addColumn('number', 'Secondary');
      data.addColumn('number', 'Other');
      data.addColumn('number', 'Requered');
      data.addColumn('number', 'RequiredCapacity');

      data.addRows([

        [60, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [61, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [62, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [63, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [64, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [65, null, null, null, null, null, 39785, 0, 0, 0, 0],
        [66, 'R', 'Rate 66', null, null, null, 0, 0, 0, 40036, 40036],
        [67, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [68, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [69, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [70, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [71, null, null, null, null, null, 0, 0, 0, 40036, 40036],
        [72, null, null, '', 'T', 'Texture', 0, 0, 0, 32162, 40036],
        [73, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [74, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [75, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [76, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [77, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [78, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [79, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [80, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [81, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [82, 'L', 'Lowest', null, null, null, 0, 0, 0, 0, 40036],
        [83, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [84, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [85, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [86, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [87, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [88, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [89, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [90, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [91, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [92, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [93, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [94, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [95, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [96, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [97, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [98, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [99, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [100, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [101, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [102, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [103, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [104, null, null, null, null, null, 0, 0, 0, 0, 40036],
        [105, null, null, null, null, null, 0, 0, 0, 0, 40036]
      ]);

      var options = {
        title: "test2",
        seriesType: "bars",
        bar: {
          groupWidth: "80%"
        },
        chartArea: {
          left: 90,
          top: 40
        },
        hAxis: {
          gridlines: {
            color: "transparent"
          },
          format: "0",
          viewWindow: {
            max: 105
          }
        },
        height: 400,
        width: 620,
        focusTarget: "annotation",
        displayAnnotations: true,
        series: {
          0: {
            color: "#F8E38A"
            , lineWidth: 2
          },
          1: {
            color: "#9DCF7B"
          },
          2: {
            color: "#1F88A7"
          },
          3: {
            color: "#B2DAE5"
          },
          4: {
            type: "line",
            color: "grey",
            lineWidth: 1
            , lineDashStyle: [
              10,
              2
            ]
          }
        },
        annotations: {
          textStyle: {
            fontSize: 14,
            bold: true,
            italic: false,
            color: "black"
          }
        }
        , isStacked: true
      };

      var chartContainer = document.getElementById('chart_div');
      var chart = new google.visualization.ComboChart(chartContainer);
      google.visualization.events.addListener(chart, 'ready', function () {
        var svg = chartContainer.getElementsByTagName('svg')[0];
        var svgContent = new XMLSerializer().serializeToString(svg);
        var domURL = window.URL || window.webkitURL || window;
        var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
        var image = document.getElementById('image_div').appendChild(new Image());
        image.src = imageURL;
      });
      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="chart_div" style="width:400; height:600"></div>
  <div>Images</div>
  <div id="image_div"></div>
</body>

</html>

и ... 

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart']});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Age');
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotationText' });
        data.addColumn('number', 'Value');
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotation' });
        data.addColumn({ type: 'string', role: 'annotationText' });
        data.addColumn('number', 'Total');
        data.addColumn('number', 'Other Total');

        data.addRows([
          [50,  null, null,           89561,  null, null, null,           184298, 184298],
          [51,  null, null,           95600,  null, null, null,           188500, 188500],
          [52,  null, null,           101900, null, null, null,           192900, 188900],
          [53,  'T',  null,           108400, null, null, null,           197700, 191300],
          [54,  null, null,           115200, null, null, null,           202700, 193900],
          [57,  null, null,           136900, null, null, null,           219400, 202200],
          [58,  null, null,           144600, null, null, null,           225500, 205100],
          [59,  null, null,           152600, 'X',  null, null,           231900, 208200],
          [60,  null, null,           160900, null, null, null,           238700, 211300],
          [64,  null, null,           197100, null, null, null,           268900, 225000],
          [65,  null, null,           206500, null, null, null,           276900, 228300],
          [66,  'P',  'First Point',  0,      null, null, null,           236000, 186800],
          [67,  null, null,           0,      null, null, null,           195100, 145600],
          [68,  null, null,           0,      null, null, null,           154400, 104600],
          [69,  null, null,           0,      null, null, null,           113700, 63700],
          [70,  null, null,           0,      null, null, null,           73100,  23100],
          [71,  null, null,           0,      null, null, null,           32500,  0],
          [72,  null, null,           0,      '',   'S',  'Second Point', 0,      0],
          [73,  null, null,           0,      null, null, null,           0,      0],
          [74,  null, null,           0,      null, null, null,           0,      0],
          [78,  null, null,           0,      null, null, null,           0,      0],
          [79,  null, null,           0,      null, null, null,           0,      0],
          [80,  null, null,           0,      null, null, null,           0,      0],
          [81,  null, null,           0,      null, null, null,           0,      0],
          [82,  'L',  'Last Point',   0,      null, null, null,           0,      0],
          [83,  null, null,           0,      null, null, null,           0,      0],
          [84,  null, null,           0,      null, null, null,           0,      0],
          [85,  null, null,           0,      null, null, null,           0,      0],
          [86,  null, null,           0,      null, null, null,           0,      0],
          [87,  null, null,           0,      null, null, null,           0,      0],
        ]);

        var options = {
          title: "Value Test",
          seriesType: "area",
          chartArea: {
            left: 90,
            top: 40
          },
          hAxis: {
            gridlines: {
              color: "transparent"
            },
            format: "0",
            viewWindow: {
              max: 105
            }
          },
          height: 400,
          width: 620,
          focusTarget: "category",
          displayAnnotations: true,
          series: {
            0: {
              color: "#9DCF7B",
              areaOpacity: 1

            },
            1: {
              color: "#0184A8"
            },
            2: {
              type: "line",
              color: "#F8E38A"

            }
          },
          annotations: {
            textStyle: {
              fontSize: 14,
              bold: true,
              italic: false,
              color: "black"              
            }
          }
        };

      var chartContainer = document.getElementById('chart_div');
      var chart = new google.visualization.ComboChart(chartContainer);
      google.visualization.events.addListener(chart, 'ready', function () {
        var svg = chartContainer.getElementsByTagName('svg')[0];
        var svgContent = new XMLSerializer().serializeToString(svg);
        var domURL = window.URL || window.webkitURL || window;
        var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
        var image = document.getElementById('image_div').appendChild(new Image());
        image.src = imageURL;
      });
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width:400; height:600"></div>
    <div>Image</div>
    <div id="image_div"></div>
  </body>
</html>
...