Для выполнения примера создайте html-страницу и выполните следующие действия:
1. В теге <head> добавьте ссылки на следующие js- и css-файлы:
PP.js;
PP.GraphicsBase.js
PP.BubbleChart.js;
resources.ru.js;
PP.css.
2. Далее в теге <head> добавьте сценарий, создающий пузырьковую диаграмму:
<script type="text/javascript">
var bubbleChart; // Переменная, в которой будем хранить экземпляр пузырьковой диаграммы
// Создает источник данных пузырьковой диаграммы
function CreateDataSource() {
// Создаем объект, содержащий ряды данных для атрибутов 'DimX', 'DimY', 'DimR' и 'DimCol'
var data = {
"Series": {
"Serie0_Point0": {
"DimX": {
"Items": ["1000.000000", "2100.000000", "4000.000000", "8000.000000", "16000.000000", "32000.000000", "NULL"]
},
"DimY": {
"Items": ["46.100000", "46.300000", "45.800000", "45.900000", "45.800000", "40.000000", "41.100000"]
},
"DimR": {
"Items": ["7273.000000", "9372.000000", "11630.000000", "15496.000000", "20495.000000", "19832.000000", "7273.000000"]
},
"DimCol": {
"Items": ["7273.000000", "9372.000000", "11630.000000", "15496.000000", "20495.000000", "19832.000000", "7273.000000"]
}
},
"Serie1_Point0": {
"DimX": {
"Items": ["16889.700000", "-12848.000000", "16044.000000", "-16535.400000", "27365.000000", "-27396.000000", "NULL"]
},
"DimY": {
"Items": ["108.500000", "104.000000", "106.700000", "109.000000", "106.600000", "90.700000", "105.800000"]
},
"DimR": {
"Items": ["4951.000000", "6460.000000", "8101.000000", "10574.000000", "13898.000000", "13933.000000", "NULL"]
},
"DimCol": {
"Items": ["4951.000000", "6460.000000", "8101.000000", "10574.000000", "13898.000000", "13933.000000", "NULL"]
}
},
"Serie2_Point0": {
"DimX": {
"Items": ["-8123.000000", "10207.000000", "-12414.000000", "15381.000000", "-20094.000000", "20104.000000", "NULL"]
},
"DimY": {
"Items": ["111.900000", "105.300000", "106.200000", "103.400000", "105.100000", "90.100000", "102.900000"]
},
"DimR": {
"Items": ["4700.000000", "5966.000000", "7328.000000", "9159.000000", "12061.000000", "12145.000000", "NULL"]
},
"DimCol": {
"Items": ["4700.000000", "5966.000000", "7328.000000", "9159.000000", "12061.000000", "12145.000000", "NULL"]
}
},
"Serie3_Point0": {
"DimX": {
"Items": ["4994.000000", "6553.000000", "7687.000000", "10072.000000", "12784.000000", "12225.000000", "NULL"]
},
"DimY": {
"Items": ["119.000000", "103.700000", "103.500000", "112.100000", "106.100000", "86.000000", "98.900000"]
},
"DimR": {
"Items": ["4771.000000", "6285.000000", "7397.000000", "9711.000000", "12340.000000", "11796.000000", "NULL"]
},
"DimCol": {
"Items": ["4771.000000", "6285.000000", "7397.000000", "9711.000000", "12340.000000", "11796.000000", "NULL"]
}
},
"Serie4_Point0": {
"DimX": {
"Items": ["30040.000000", "6666.000000", "52347.000000", "71173.000000", "104687.000000", "93331.000000", "NULL"]
},
"DimY": {
"Items": ["111.000000", "107.300000", "108.000000", "105.300000", "97.300000", "83.500000", "106.600000"]
},
"DimR": {
"Items": ["8609.000000", "11909.000000", "15239.000000", "20868.000000", "30918.000000", "27737.000000", "NULL"]
},
"DimCol": {
"Items": ["8609.000000", "11909.000000", "15239.000000", "20868.000000", "30918.000000", "27737.000000", "NULL"]
}
},
"Serie5_Point0": {
"DimX": {
"Items": ["15890.400000", "58044.000000", "72361.000000", "92093.000000", "117646.000000", "274647.800000", "NULL"]
},
"DimY": {
"Items": ["110.800000", "97.100000", "108.300000", "104.600000", "97.100000", "81.600000", "111.800000"]
},
"DimR": {
"Items": ["9713.000000", "12490.000000", "15725.000000", "20197.000000", "26028.000000", "23137.000000", "NULL"]
},
"DimCol": {
"Items": ["9713.000000", "12490.000000", "15725.000000", "20197.000000", "26028.000000", "23137.000000", "NULL"]
}
},
"Serie6_Point0": {
"DimX": {
"Items": ["5947.000000", "7430.000000", "8784.000000", "11127.000000", "15008.000000", "14731.000000", "NULL"]
},
"DimY": {
"Items": ["115.600000", "101.100000", "103.600000", "105.100000", "104.200000", "88.900000", "111.000000"]
},
"DimR": {
"Items": ["4397.000000", "5554.000000", "6636.000000", "8485.000000", "11545.000000", "11419.000000", "NULL"]
},
"DimCol": {
"Items": ["4397.000000", "5554.000000", "6636.000000", "8485.000000", "11545.000000", "11419.000000", "NULL"]
}
},
"Serie7_Point0": {
"DimX": {
"Items": ["5297.000000", "6700.000000", "8185.000000", "10508.000000", "13208.000000", "12542.000000", "NULL"]
},
"DimY": {
"Items": ["106.400000", "98.500000", "106.600000", "108.200000", "103.900000", "82.100000", "108.200000"]
},
"DimR": {
"Items": ["4238.000000", "5373.000000", "6576.000000", "8452.000000", "10626.000000", "10081.000000", "NULL"]
},
"DimCol": {
"Items": ["4238.000000", "5373.000000", "6576.000000", "8452.000000", "10626.000000", "10081.000000", "NULL"]
}
},
"Serie8_Point0": {
"DimX": {
"Items": ["15255.000000", "19968.000000", "24787.000000", "1111.000000", "11.000000", "37446.000000", "NULL"]
},
"DimY": {
"Items": ["115.600000", "104.600000", "106.100000", "108.500000", "101.300000", "78.900000", "103.600000"]
},
"DimR": {
"Items": ["8093.000000", "10683.000000", "13369.000000", "18022.000000", "23232.000000", "20614.000000", "NULL"]
},
"DimCol": {
"Items": ["8093.000000", "10683.000000", "13369.000000", "18022.000000", "23232.000000", "20614.000000", "NULL"]
}
},
"Serie9_Point0": {
"DimX": {
"Items": ["7311.000000", "9622.000000", "11316.000000", "13916.000000", "17883.000000", "17241.000000", "NULL"]
},
"DimY": {
"Items": ["107.600000", "105.900000", "102.500000", "100.800000", "97.500000", "89.300000", "98.300000"]
},
"DimR": {
"Items": ["5238.000000", "6916.000000", "8157.000000", "10055.000000", "12940.000000", "12485.000000", "NULL"]
},
"DimCol": {
"Items": ["5238.000000", "6916.000000", "8157.000000", "10055.000000", "12940.000000", "12485.000000", "NULL"]
}
},
"Serie10_Point0": {
"DimX": {
"Items": ["11883.000000", "15362.000000", "19188.000000", "26221.000000", "35687.000000", "190140.900000", "NULL"]
},
"DimY": {
"Items": ["109.800000", "107.300000", "108.800000", "105.900000", "104.400000", "89.200000", "105.500000"]
},
"DimR": {
"Items": ["6652.000000", "8673.000000", "10918.000000", "15033.000000", "20593.000000", "21769.000000", "NULL"]
},
"DimCol": {
"Items": ["6652.000000", "8673.000000", "10918.000000", "15033.000000", "20593.000000", "21769.000000", "NULL"]
}
},
"Serie11_Point0": {
"DimX": {
"Items": ["5594.000000", "6877.000000", "8187.000000", "9989.000000", "13961.000000", "13389.000000", "NULL"]
},
"DimY": {
"Items": ["118.900000", "102.400000", "105.100000", "97.900000", "113.700000", "85.800000", "105.000000"]
},
"DimR": {
"Items": ["5122.000000", "6394.000000", "7723.000000", "9546.000000", "13515.000000", "13096.000000", "NULL"]
},
"DimCol": {
"Items": ["5122.000000", "6394.000000", "7723.000000", "9546.000000", "13515.000000", "13096.000000", "NULL"]
}
},
"Serie12_Point0": {
"DimX": {
"Items": ["14672.000000", "19716.000000", "24159.000000", "32280.000000", "42985.000000", "38451.000000", "NULL"]
},
"DimY": {
"Items": ["108.200000", "100.300000", "104.300000", "105.200000", "98.900000", "86.700000", "104.200000"]
},
"DimR": {
"Items": ["5973.000000", "8131.000000", "10085.000000", "13628.000000", "18338.000000", "16562.000000", "NULL"]
},
"DimCol": {
"Items": ["5973.000000", "8131.000000", "10085.000000", "13628.000000", "18338.000000", "16562.000000", "NULL"]
}
},
"Serie13_Point0": {
"DimX": {
"Items": ["13992.000000", "17192.000000", "21486.000000", "27987.000000", "35534.000000", "35955.000000", "NULL"]
},
"DimY": {
"Items": ["105.200000", "98.100000", "108.300000", "105.800000", "100.700000", "88.300000", "101.700000"]
},
"DimR": {
"Items": ["5396.000000", "6657.000000", "8351.000000", "10915.000000", "13902.000000", "14093.000000", "NULL"]
},
"DimCol": {
"Items": ["5396.000000", "6657.000000", "8351.000000", "10915.000000", "13902.000000", "14093.000000", "NULL"]
}
},
"Serie14_Point0": {
"DimX": {
"Items": ["7934.000000", "9553.000000", "11876.000000", "14767.000000", "19410.000000", "20336.000000", "NULL"]
},
"DimY": {
"Items": ["118.100000", "100.100000", "107.100000", "99.500000", "106.900000", "92.500000", "102.100000"]
},
"DimR": {
"Items": ["6424.000000", "7801.000000", "9769.000000", "12227.000000", "16175.000000", "17050.000000", "NULL"]
},
"DimCol": {
"Items": ["6424.000000", "7801.000000", "9769.000000", "12227.000000", "16175.000000", "17050.000000", "NULL"]
}
},
"Serie15_Point0": {
"DimX": {
"Items": ["17029.000000", "126760.600000", "24898.000000", "33116.000000", "46994.000000", "302816.900000", "NULL"]
},
"DimY": {
"Items": ["108.100000", "99.600000", "103.500000", "106.300000", "111.900000", "86.800000", "102.800000"]
},
"DimR": {
"Items": ["7028.000000", "8619.000000", "10379.000000", "13827.000000", "19638.000000", "20341.000000", "NULL"]
},
"DimCol": {
"Items": ["7028.000000", "8619.000000", "10379.000000", "13827.000000", "19638.000000", "20341.000000", "NULL"]
}
},
"Serie16_Point0": {
"DimX": {
"Items": ["13983.000000", "18099.000000", "22179.000000", "28355.000000", "34118.000000", "33629.000000", "NULL"]
},
"DimY": {
"Items": ["116.700000", "99.200000", "108.200000", "105.800000", "94.900000", "86.800000", "110.400000"]
},
"DimR": {
"Items": ["8841.000000", "11574.000000", "14330.000000", "18500.000000", "22476.000000", "22337.000000", "NULL"]
},
"DimCol": {
"Items": ["8841.000000", "11574.000000", "14330.000000", "18500.000000", "22476.000000", "22337.000000", "NULL"]
}
},
"Serie17_Point0": {
"DimX": {
"Items": ["5599.000000", "7263.000000", "8924.000000", "11180.000000", "14074.000000", "13469.000000", "NULL"]
},
"DimY": {
"Items": ["113.100000", "102.100000", "106.900000", "104.500000", "99.500000", "86.500000", "106.100000"]
},
"DimR": {
"Items": ["4817.000000", "6269.000000", "7724.000000", "9695.000000", "12217.000000", "11699.000000", "NULL"]
},
"DimCol": {
"Items": ["4817.000000", "6269.000000", "7724.000000", "9695.000000", "12217.000000", "11699.000000", "NULL"]
}
},
"Serie18_Point0": {
"DimX": {
"Items": ["6275.000000", "8025.000000", "9566.000000", "12341.000000", "16210.000000", "16060.000000", "NULL"]
},
"DimY": {
"Items": ["105.900000", "104.400000", "103.400000", "103.400000", "103.600000", "88.700000", "97.900000"]
},
"DimR": {
"Items": ["5009.000000", "6497.000000", "7848.000000", "10249.000000", "13622.000000", "13631.000000", "NULL"]
},
"DimCol": {
"Items": ["5009.000000", "6497.000000", "7848.000000", "10249.000000", "13622.000000", "13631.000000", "NULL"]
}
},
"Serie19_Point0": {
"DimX": {
"Items": ["3948.000000", "5137.000000", "6452.000000", "8276.000000", "10618.000000", "11173.000000", "NULL"]
},
"DimY": {
"Items": ["106.400000", "102.500000", "110.300000", "108.300000", "105.100000", "94.500000", "97.900000"]
},
"DimR": {
"Items": ["3516.000000", "4603.000000", "5819.000000", "7510.000000", "9688.000000", "10240.000000", "NULL"]
},
"DimCol": {
"Items": ["3516.000000", "4603.000000", "5819.000000", "7510.000000", "9688.000000", "10240.000000", "NULL"]
}
},
"Serie20_Point0": {
"DimX": {
"Items": ["20524.000000", "323943.600000", "32023.000000", "43868.000000", "59389.000000", "246478.900000", "NULL"]
},
"DimY": {
"Items": ["112.200000", "104.800000", "107.500000", "107.200000", "102.100000", "86.300000", "99.900000"]
},
"DimR": {
"Items": ["7182.000000", "9025.000000", "11353.000000", "15645.000000", "21294.000000", "21228.000000", "NULL"]
},
"DimCol": {
"Items": ["7182.000000", "9025.000000", "11353.000000", "15645.000000", "21294.000000", "21228.000000", "NULL"]
}
},
"Serie21_Point0": {
"DimX": {
"Items": ["5200.000000", "6469.000000", "7565.000000", "9034.000000", "13174.000000", "13436.000000", "NULL"]
},
"DimY": {
"Items": ["111.200000", "99.200000", "104.000000", "100.400000", "109.800000", "93.000000", "101.600000"]
},
"DimR": {
"Items": ["4546.000000", "5713.000000", "6744.000000", "8122.000000", "11944.000000", "12256.000000", "NULL"]
},
"DimCol": {
"Items": ["4546.000000", "5713.000000", "6744.000000", "8122.000000", "11944.000000", "12256.000000", "NULL"]
}
},
"Serie22_Point0": {
"DimX": {
"Items": ["6344.000000", "7958.000000", "9603.000000", "12339.000000", "16061.000000", "15758.000000", "NULL"]
},
"DimY": {
"Items": ["112.700000", "103.900000", "104.200000", "104.000000", "99.900000", "90.600000", "99.800000"]
},
"DimR": {
"Items": ["4549.000000", "5764.000000", "7023.000000", "9100.000000", "11932.000000", "11780.000000", "NULL"]
},
"DimCol": {
"Items": ["4549.000000", "5764.000000", "7023.000000", "9100.000000", "11932.000000", "11780.000000", "NULL"]
}
},
"Serie23_Point0": {
"DimX": {
"Items": ["6623.000000", "9014.000000", "10957.000000", "13656.000000", "19101.000000", "18707.000000", "NULL"]
},
"DimY": {
"Items": ["116.900000", "107.000000", "105.600000", "106.500000", "114.900000", "85.500000", "107.400000"]
},
"DimR": {
"Items": ["4853.000000", "6681.000000", "8209.000000", "10331.000000", "14581.000000", "14393.000000", "NULL"]
},
"DimCol": {
"Items": ["4853.000000", "6681.000000", "8209.000000", "10331.000000", "14581.000000", "14393.000000", "NULL"]
}
},
"Serie24_Point0": {
"DimX": {
"Items": ["3277.000000", "4234.000000", "5126.000000", "6672.000000", "8833.000000", "8484.000000", "NULL"]
},
"DimY": {
"Items": ["109.300000", "101.500000", "105.500000", "108.300000", "105.400000", "88.600000", "99.400000"]
},
"DimR": {
"Items": ["3589.000000", "4654.000000", "5650.000000", "7369.000000", "9771.000000", "9383.000000", "NULL"]
},
"DimCol": {
"Items": ["3589.000000", "4654.000000", "5650.000000", "7369.000000", "9771.000000", "9383.000000", "NULL"]
}
},
"Serie25_Point0": {
"DimX": {
"Items": ["6181.000000", "7627.000000", "8950.000000", "11532.000000", "14918.000000", "14636.000000", "NULL"]
},
"DimY": {
"Items": ["110.000000", "100.100000", "103.400000", "106.500000", "102.300000", "89.600000", "98.800000"]
},
"DimR": {
"Items": ["5163.000000", "6474.000000", "7714.000000", "10081.000000", "13213.000000", "13121.000000", "NULL"]
},
"DimCol": {
"Items": ["5163.000000", "6474.000000", "7714.000000", "10081.000000", "13213.000000", "13121.000000", "NULL"]
}
},
"Serie26_Point0": {
"DimX": {
"Items": ["61357.000000", "288732.400000", "95267.000000", "16535.400000", "321088.500000", "176870.700000", "NULL"]
},
"DimY": {
"Items": ["116.800000", "105.800000", "110.700000", "119.700000", "104.400000", "81.700000", "101.300000"]
},
"DimR": {
"Items": ["23130.000000", "28780.000000", "35210.000000", "49795.000000", "61592.000000", "61088.000000", "NULL"]
},
"DimCol": {
"Items": ["23130.000000", "28780.000000", "35210.000000", "49795.000000", "61592.000000", "61088.000000", "NULL"]
}
},
"Serie27_Point0": {
"DimX": {
"Items": ["2213.000000", "2823.000000", "3822.000000", "4916.000000", "6305.000000", "6452.000000", "NULL"]
},
"DimY": {
"Items": ["107.000000", "100.900000", "116.300000", "106.600000", "106.900000", "89.600000", "109.300000"]
},
"DimR": {
"Items": ["5847.000000", "7452.000000", "10079.000000", "12961.000000", "16592.000000", "16966.000000", "NULL"]
},
"DimCol": {
"Items": ["5847.000000", "7452.000000", "10079.000000", "12961.000000", "16592.000000", "16966.000000", "NULL"]
}
}
}
}
// Создаем и возвращаем источник данных
var dataSource = new PP.DataSource(data);
return dataSource;
}
// Создаем справочник с настройками пузырьковой диаграммы
function generateBubbles(bubblesCount, dataSource, visuals) {
// Задаем значения свойств в справочнике настроек
var baseSettings = {
"Version": "2",
"ShowBubbleHistory": "true",
"ChartArea": {
"Axes": {
"X": {
"Type": "X"
},
"Y": {
"Type": "Y"
}
}
},
"Legends": {
0: {
"Scale": "colorScale",
"Type": "Intervals"
},
1: {
"Scale": "rScale",
"Type": "Size"
}
},
"AreaSelectionAction": "ItemsSelection",
"UseSelectOnRightClick": true
};
// Задаем значения свойств для шкалы времени в справочнике настроек
baseSettings.Timeline = {
"StepsNames": ["2004", "2005", "2006", "2007", "2008", "2009", "2010"],
"StepDuration": "1000",
"DelayDuration": "500",
"ReturnToInitialState": "true",
"Margin": "0,8,10,8",
"ChartTimeline": undefined
};
// Задаем значения свойств для измерения по оси Х
if (visuals.X) {
baseSettings.XVisual = {
"CoordinateMapping": {
"DimAttributeId": "DimX",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.NormalizationTransformer"
},
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Задаем значения свойств для измерения по оси Х
if (visuals.Y) {
baseSettings.YVisual = {
"CoordinateMapping": {
"DimAttributeId": "DimY",
"Type": "Transformer",
"DataTransformer": {
"PPType": "PP.NormalizationTransformer"
},
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Задаем значения свойств для измерения по размерам пузырьков
if (visuals.R) {
baseSettings.Scales = baseSettings.Scales || {};
baseSettings.Scales['rScale'] = {
"Mode": "Uniform",
"IntervalsCount": "5",
"First": "10",
"Last": "30",
"NoData": "12",
"TypeArguments": "Double"
};
baseSettings.RVisual = {
"NumericMapping": {
"DimAttributeId": "DimR",
"Type": "Scale",
"Scale": "rScale",
"DataSource": "ds0",
"AutoSetup": "true"
}
}
}
// Задаем значения свойств для измерения по цвету пузырьков
if (visuals.Color) {
baseSettings.Scales = baseSettings.Scales || {};
baseSettings.Scales['colorScale'] = {
"Mode": "Uniform",
"Items": "#FFFF462C #FFEBAF36 #FFFF0900 #FFB1CA40 #FF6A8535",
"NoData": "#FFBFBFBF",
"TypeArguments": "Brush"
};
baseSettings.ColorVisual = {
"ColorMapping": {
"DimAttributeId": "DimCol",
"Scale": "colorScale",
"DataSource": "ds0",
"Type": "Scale",
"AutoSetup": "true"
}
}
}
// Устанавливаем идентификатор источника данных
var ds0;
baseSettings.DataSources = {
'ds0': ds0 = {
'Id': 'ds0'
}
};
// Задаем наименования измерений
var attNames = ds0.AttributesNames = {};
if (visuals['X'])
attNames['DimX'] = "Валовой региональный продукт, млн. рублей";
if (visuals['Y'])
attNames['DimY'] = "Индекс физического объема валового регионального продукта, % к предыдущему периоду";
if (visuals['R'])
attNames['DimR'] = "Валовой региональный продукт на душу населения, рублей";
if (visuals['Color'])
attNames['DimCol'] = "Валовой региональный продукт на душу населения, рублей";
// Получаем ряды данных из источника
var series = ds0.Series = {};
for (var i = 0; i < bubblesCount; i++) {
var serie = series['Bubble' + i] = dataSource.getSeries()["Serie" + i + "_Point0"];
}
// Задаем настройки рядов данных
var series = baseSettings.Series = [];
var globalIds = baseSettings.GlobalItemsIds = {};
for (var i = 0; i < bubblesCount; i++) {
series[i] = {
'Symbol': {},
'Points': [{
'Value': 'Bubble' + i,
'Id': 'Bubble' + i
}]
};
globalIds['Bubble' + i] = 'Item' + i; } // Возвращаем объект настроек пузырьковой диаграммы return baseSettings; };
// Создает пузырьковую диаграмму function createChart() { // Указываем путь к корневой папке, содержащей файлы ресурсов PP.resourceManager.setRootResourcesFolder("../resources/"); // Устанвливаем языковые настройки для ресурсов PP.setCurrentCulture(PP.Cultures.ru) // Получаем DOM-элемент контейнера, в котором будет нарисована пузырьковая диаграмма var container = document.getElementById("bubbleChart"); // Создаем объект пузырьковой диаграммы bubbleChart = new PP.Ui.BubbleChart({
// Добавим пользовательские данные
CustomData: "Пузырьковая диаграмма 1"
}); // Создаем источник данных var ds = CreateDataSource();
// Создаем справочник с настройками пузырьковой диаграммы
var settings = generateBubbles(28, ds, {
'X': true,
'Y': true,
'R': true,
'Color': true
});
// Определяем настройки пузырьковой диаграммы
settings = PP.extend(settings, {
HistoryMode: PP.Ui.NoDataHistoryMode.Continue, // Режим отображения истории значений для выбранного пузырька пузырьковой диаграммы
ShowBubbleHistory: true, // Разрешим отображать историю значений для указанного ряда
ShowHistoryMode: PP.HoverMode.MouseOver, // Отображение истории значений при наведении курсора
ShowBubblesWithNoData: true, // Разрешим отображать пузырьки пузырьковой диаграммы без данных
ImagePath: '../build/img/' // Путь к папке со значками для пузырьковой диаграммы
}, true);
// Устанавливаем настройки пузырьковой диаграммы
bubbleChart.setSettings(settings); // Размещаем пузырьковую диаграмму в блоке <div> bubbleChart.addToNode(container); // Задаем размеры пузырьковой диаграммы bubbleChart.setWidth(551); bubbleChart.setHeight(500); // Устанавливаем шаг временной оси bubbleChart.getTimeline().setCurrentStep(0); } </script>
3. В теге <body> в качестве значения атрибута «onLoad» укажите имя функции, которая создает пузырьковую диаграмму. Внутри данного тега разместите блок с идентификатором «bubbleChart» для хранения созданной пузырьковой диаграммы:
<body class="PPNoSelect" onselectstart="return false;" onload="createChart()"> <div id="bubbleChart" style="float:left;border: #CCCCCC 1px solid; padding: 5px; margin: 5px;"></div> </body>
Для выполнения пользовательских сценариев над пузырьковой диаграммой, в том числе примеров, приведённых на страницах описания свойств, методов и событий данного компонента и составляющих его элементов, требуется разместить код либо после указанного выше сценария, либо в консоли браузера.
В результате выполнения примера на html-странице будет размещен компонент PP.Ui.BubbleChart:
См. также: