Я пытаюсь сделать диаграмму пузырьков и нарисовать линию, чтобы разделить пузырьки на две области, одну ниже линии и одну над ней. поэтому я могу объединить пузырь визуализации и линейную диаграмму Google? если нет других альтернатив визуализации Google?Как объединить пузырь и линейную диаграмму?
Тип диаграммы combochart в настоящее время не поддерживает диаграммы пузырьков. Это означает, что вы не сможете их комбинировать.
Как the help documents state следующие типы диаграмм поддерживаются в комбинированных диаграмм для seriesType:
Тип линии по умолчанию для всех серий, не указанных в серии собственности. Доступными значениями являются «строка», «площадь», «бары», «подсвечники» и «steppedArea».
Поскольку диаграммы разброса (XY) также не поддерживаются, вы не можете делать что-то напуганное, как создание серии серий и изменение размера пузырьков вручную. Поэтому вам нужно попробовать что-то более сложное.
Вариант 1: Фанки CSS
Примечание: Это абсолютно положительно не работает на многих версиях IE.
Шаг 1: Создайте 2 перекрытия <div> элементы одинакового размера.
Шаг 2: Отформатируйте две отдельные графики Google Визуализации с теми же параметрами chartArea.
Шаг 3: Создайте функцию для определения максимальных/минимальных значений для обеих диаграмм, чтобы убедиться, что они находятся в одном масштабе.
Пример:
// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber)/Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Define the number of gridlines (default 5)
var gridlines = 5;
// Determine an appropriate gap between gridlines
var interval = range/(gridlines - 1);
// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;
// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;
Шаг 4: Установить цвет фона прозрачным использованием backgroundColor: "transparent" для <div> элемента сверху. (Это шаг, который заставляет IE плакать)
Шаг 5: Нарисуйте обе диаграммы с использованием одинаковых масштабированных осей в двух перекрывающихся элементах <div>.
Шаг 6: Посмотрите, выглядит ли он правильно. Интерактивность может быть немного болью в зависимости от браузера из-за перекрывающихся элементов. Возможно, вам понадобится написать свой собственный код для верхней диаграммы, чтобы переместить Z-индекс этого <div> в обратную сторону, когда один из выбираемых элементов диаграммы не зависает.
Вариант 2: Диаграмма рассеивания Fun
Это будет работать в IE, а также, и это менее сложно, но будет намного сложнее настроить данные мудр.
Шаг 1: Создайте свою линейную диаграмму и ваши точки в виде пузырьков в DataTable. Как вы настроите это, резко изменится в зависимости от ваших данных и того, как вы хотите, чтобы пузыри/линии выстраивались в очередь.
Примеры:
Я хочу, чтобы эти пузыри:
X Y Size
1 2 3
2 3 4
3 4 5
4 5 1
5 1 2
Но я хочу эту строку:
X Y
1.2 5
2.3 4
3.4 3
4.5 2
5.6 1
Тогда я должен был бы иметь все эти различные значения X в первой колонке , и имеют много нулевых значений для различных серий, а именно:
X Line Bubble Size
1 null 2 3
2 null 3 4
3 null 4 5
4 null 5 1
5 null 1 2
1.2 5 null null
2.3 4 null null
3.4 3 null null
4.5 2 null null
5.6 1 null null
Шаг 2: Установите столбец 1/2 так, чтобы он отображал только значения XY для двух серий (столбец 3 - размеры пузырьков, которые вы не хотите отображать в виде дополнительной серии).
Шаг 3: Задайте параметры для каждой серии. Серия 1 (линейная диаграмма) имела бы lineWidth: 1 или что бы вы ни хотели, а серия 2 имела бы lineWidth: 0 (чтобы каждый элемент был точкой).
Шаг 4: Установите размеры пузырьков с помощью pointSize для серии пузырьков. К сожалению, вся серия будет иметь то же самое pointSize. Таким образом, в приведенном выше примере нам нужно либо переформатировать наш DataTable, чтобы иметь каждый отдельный пузырь в другой серии (многие другие столбцы), либо написать функцию, которая создает новую серию для каждого разного размера пузыря. Затем мы могли бы использовать ряд размеров пузырьков для установки pointSize для каждой серии.
Любое решение должно работать в зависимости от вашего приложения и сложности ваших данных, вы должны выбрать, какой из них лучше всего работает. И дайте нам знать, что вы делаете, потому что я уверен, что кто-то в будущем будет использовать его!
Отредактировано: Полностью запутанный форум, ответил на вопрос для Excel.