Как я могу взломать фоновое изображение в динамической (JavaScript / SVG) диаграмме Google Chart Tools? - PullRequest
Новая
       5

Как я могу взломать фоновое изображение в динамической (JavaScript / SVG) диаграмме Google Chart Tools?

4 голосов
/ 12 января 2012

Я обновляю старый модуль визуализации данных, который использовал Google Image Chart API .Теперь мы переключаемся на новый (er) API визуализации , который использует JavaScript для генерации динамических диаграмм в браузере в указанном контейнере <div>.

Нам нужнапредставить график с фоновым изображением (для целей брендинга).Однако единственное, что мне удалось сделать, учитывая параметры конфигурации в справочнике API , - это изменить фон цвет .

Если я вставлюФоновое изображение в <div>, в которое рисуется Диаграмма, диаграмма (очевидно) просто накладывает его.

Есть ли решение моей проблемы на JavaScript или HTML5, о котором я полностью не знаю?

(Я немного новичок в JavaScript, благодарю вас за то, что вы столкнулись с тем, что на самом деле может быть тривиальной - или явно невозможной - проблемой!)

Ответы [ 2 ]

11 голосов
/ 12 января 2012

Возможно, вы захотите обернуть целевой элемент вашей диаграммы другим и изменить фон родительского изображения на желаемое изображение, удаляя фон дочернего элемента.

, например, HTML 

<div id='brand_div'>
    <div id='chart_div'></div>
</div>

и CSS 

#brand_div{ 
    background: url(<SOME-URL>) no-repeat;
}

И, конечно, в опциях вашего графика в JavaScript 

var options = {
    ...
    backgroundColor: 'none'
};

Я привожу пример здесь http://jsfiddle.net/jaimem/jaxfz/

1 голос
/ 07 декабря 2016

На тот случай, если у кого-то возникнет та же проблема, что и у меня, вы можете также зафиксировать фон только на диаграмме, а не весь блок (который добавит фон к заголовку, оси и т. Д.)

Вы можете сделать это следующим образом:

В HTML, как предложил Хайме: 

<div id='brand_div'>
    <div id='chart_div'></div>
</div>

В CSS, как предложил Хайме: 

#brand_div{ 
    background: url(<SOME-URL>) no-repeat;
}

В JavaScript: 

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['ID', 'X', 'Y', 'Temperature'],
     ['',   80,  167,      120],
     ['',   79,  136,      130],
     ['',   78,  184,      50],
     ['',   72,  278,      230],
     ['',   81,  200,      210],
     ['',   72,  170,      100],
     ['',   68,  477,      80]
   ]);

   var options = {
     colorAxis: {colors: ['yellow', 'red']},
     width: 450,
     height: 300,
     title: 'My Daily Activities',
     backgroundColor: 'none' // this is important!
   };

   var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
   chart.draw(data, options);

   // this two lines are the ones that do the magic
   var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 
   $('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}

Весь этот код был написан с использованием предложения Хайме, Документация Google Chart и комментариев к этот вопрос переполнения стека

...