Недавно потребовалось создать несколько графиков. Перепробовал кучу всевозможных плагинов и остановился на jqPlot. Однако и в нем есть некоторые, не устраивающие меня свойства, которые хотелось бы подправить. В Английском я слабоват, а на Русском описания нет. Может у кого есть перевод описания функций данного плагина, или посоветуйте достойный программный переводчик с английского - то, что мне переводит "сократ", не назовешь переводом вообще. За ранее огромное спасибо.
во че я нарыл. я не знаю какая это версия - давно это было. я не знаю насколько код рабочий - я не буду искать актуальную версию и проверять, ибо ты сразу тут все поймешь я думаю. PHP: <?php function drow_chart ($lines,$axis_x_label,$width=980,$height=333) { //var_dump ($lines); if (is_array($axis_x_label)) { global $chartdivcounter; $chartdivcounter++; $secuence=array(); $i=1; $points = count($axis_x_label); $label_length = strlen($axis_x_label[0]); $angle = 0; if ($points+$label_length/2 > 50) {$angle = 45; } elseif ($points+$label_length/2 > 26) { $angle = ($points-24)*2; } //else { // $angle = 0; // if (is_array($lines)) { /* * случай первый: * lines[0]=5; * lines[1]=7; * lines[2]=19 * * случай второй: * lines[0]="5,6,12,14,25,9"; * lines[1]="7,16,22,11,5,2"; * lines[2]="19,150,72,57,69"; * * случай третий: * lines[0]=array(5,6,12,14,25,9); * lines[1]=array(7,16,22,11,5,2); * lines[2]=array(19,150,72,57,69); * * случай четвертый: * lines="5,6,12,14,25,9"; */ if (is_int($lines[0])) { //случай первый //echo 'Случай первый'; //var_dump ($lines); foreach ($lines as $val) { $secuence[] = $i.','.$val; $i++; } $secuence = '['.join('],[',$secuence).']'; } elseif (is_float($lines[0])) { //случай полтора foreach ($lines as $val) { $secuence[] = $i.','.str_replace(',','.',$val); $i++; } $secuence = '['.join('],[',$secuence).']'; } elseif (is_string($lines[0])) { //случай второй //echo 'Случай второй'; //$secuence = '[1,2],[2,2],[3,2],[4,0],[5,5],[6,11],[7,6],[8,9],[9,6],[10,6],[11,32],[12,16]'; //var_dump ($lines); foreach ($lines as $val) { $val=explode(',',$val); $str = array(); $i=1; foreach ($val as $vally) { $str[] = '['.$i.','.$vally.']'; $i++; } $secuence[] = join(',',$str); } $secuence = join('],[',$secuence); } elseif (is_array($lines[0])) { //случай третий //echo 'Случай третий'; //var_dump ($lines); foreach ($lines as $val) { $str = array(); $i=1; //var_dump($val); foreach ($val as $vally) { //$str = 'gaga'; $str[] = '['.$i.','.$vally.']'; $i++; } $secuence[] = join(',',$str); } $secuence = join('],[',$secuence); } } elseif (is_string($lines)) { //случай четвертый //echo 'Случай четвертый'; //var_dump ($lines); $lines=explode(',',$lines); foreach ($lines as $val) { $secuence[]= $i.','.$val; $i++; } $secuence = '['.join('],[',$secuence).']'; } $axis_x_label = "'".join("','",$axis_x_label)."'"; echo '<div id="chartdiv'.$chartdivcounter.'" style="width:'.$width.'px; height:'.$height.'px;"></div>'; echo '<script type="text/javascript" language="javascript"> $(document).ready(function(){ plot'.$chartdivcounter.' = $.jqplot("chartdiv'.$chartdivcounter.'", [['.$secuence.']],{ axes:{ xaxis:{ ticks:['.$axis_x_label.'], renderer: $.jqplot.CategoryAxisRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: {angle: '.$angle.'} }, yaxis:{ min:0 } }, highlighter: { sizeAdjust: 10, tooltipLocation: "n", tooltipAxes: "y", tooltipFormatString: "<span style='."'".'color:blue;'."'".'>%d</span><", useAxesFormatters: false }, seriesDefaults: { fillAlpha:0.5, fill: true, fillAndStroke: true, shadow:false }, grid: { drawGridLines: true, gridLineColor: "#ebebff", background: "#f7f7ff", borderColor: "#e0e0ff", borderWidth: 2.0, shadow: true, shadowAngle: 45, shadowOffset: 1.5, shadowWidth: 3, shadowDepth: 3, shadowAlpha: 0.07, renderer: $.jqplot.CanvasGridRenderer, rendererOptions: {} }, series:[{color:"#4070e1"}], cursor:{ zoom:true, showTooltip:false, dblClickReset:true } })});</script>'."\n\r\n\r"; } } function drow_fading_chart ($lines,$axis_x_label,$maxY=50,$width=980,$height=333) { //var_dump ($lines); if (is_array($axis_x_label)) { global $chartdivcounter; $chartdivcounter++; $secuence=array(); $line_amount = 0; $i=1; $points = count($axis_x_label); $label_length = strlen($axis_x_label[0]); $angle = 0; if ($points+$label_length/2 > 50) {$angle = 45; } elseif ($points+$label_length/2 > 26) { $angle = ($points-24)*2; } /* * случай первый: * lines[0]=5; * lines[1]=7; * lines[2]=19 * * случай второй: * lines[0]="5,6,12,14,25,9"; * lines[1]="7,16,22,11,5,2"; * lines[2]="19,150,72,57,69"; * * случай третий: * lines[0]=array(5,6,12,14,25,9); * lines[1]=array(7,16,22,11,5,2); * lines[2]=array(19,150,72,57,69); * * случай четвертый: * lines="5,6,12,14,25,9"; * */ if (is_array($lines)) { if (is_int($lines[0]) or is_float($lines[0]) ) { $line_amount = 1; //случай первый //echo 'Случай первый'; //var_dump ($lines); foreach ($lines as $val) { $secuence[] = $i.','.$val; $i++; } $secuence = '['.join('],[',$secuence).']'; } elseif (is_float($lines[0])) { //случай полтора foreach ($lines as $val) { $secuence[] = $i.','.str_replace(',','.',$val); $i++; } $secuence = '['.join('],[',$secuence).']'; } elseif (is_string($lines[0])) { //случай второй foreach ($lines as $val) { $line_amount++; if ($line_amount > 9) {break;} $val=explode(',',$val); $str = array(); $i=1; foreach ($val as $vally) { $str[] = '['.$i.','.$vally.']'; $i++; } $secuence[] = join(",\n\r",$str); } $secuence = join('],[',$secuence); } elseif (is_array($lines[0]) AND is_int($lines[0][0])) { //случай третий foreach ($lines as $val) { $line_amount++; if ($line_amount > 9) {break;} $str = array(); $i=1; //var_dump($val); foreach ($val as $vally) { //$str = 'gaga'; $str[] = '['.$i.','.$vally.']'; $i++; } $secuence[] = join(',',$str); } $secuence = join("],\n\r[",$secuence); } } elseif (is_array($lines[0]) AND is_int($lines[0][0])) { //случай третий foreach ($lines as $val) { $line_amount++; if ($line_amount > 9) {break;} $str = array(); $i=1; //var_dump($val); foreach ($val as $vally) { //$str = 'gaga'; $str[] = '['.$i.','.str_replace(',','.',$vally).']'; $i++; } $secuence[] = join(',',$str); } $secuence = join("],\n\r[",$secuence); } } elseif (is_string($lines)) { //случай четвертый $line_amount=1; $lines=explode(',',$lines); foreach ($lines as $val) { $secuence[]= $i.','.$val; $i++; } $secuence = '['.join('],[',$secuence).']'; } $axis_x_label = "'".join("','",$axis_x_label)."'"; echo '<div id="chartdiv'.$chartdivcounter.'" style="width:'.$width.'px; height:'.$height.'px;"></div>'; echo '<script type="text/javascript" language="javascript"> $(document).ready(function(){ plot'.$chartdivcounter.' = $.jqplot("chartdiv'.$chartdivcounter.'", [['.$secuence.']],{ axes:{ xaxis:{ ticks:['.$axis_x_label.'], renderer: $.jqplot.CategoryAxisRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: {angle: '.$angle.'} }, yaxis:{ min:0, max:'.$maxY.' } }, highlighter: { sizeAdjust: 10, tooltipLocation: "n", tooltipAxes: "y", lineWidthAdjust:2, tooltipFormatString: "<span style='."'".'color:blue;'."'".'>%d %.5P</span><", useAxesFormatters: false }, seriesDefaults: { fillAlpha:0.5, fill: true, fillAndStroke: true, shadow:false }, grid: { drawGridLines: true, gridLineColor: "#ebebff", background: "#f7f7ff", borderColor: "#e0e0ff", borderWidth: 2.0, shadow: true, shadowAngle: 45, shadowOffset: 1.5, shadowWidth: 3, shadowDepth: 3, shadowAlpha: 0.07, renderer: $.jqplot.CanvasGridRenderer, rendererOptions: {} }, series:['; if ($line_amount > 9) {echo ' {color:"#c0e7ff",lineWidth: 0.1},';} if ($line_amount > 8) {echo ' {color:"#c0e7ff",lineWidth: 0.15},';} if ($line_amount > 7) {echo ' {color:"#c0e7ff",lineWidth: 0.2},';} if ($line_amount > 6) {echo ' {color:"#c0e7ff",lineWidth: 0.25},';} if ($line_amount > 5) {echo ' {color:"#b0e0ff",lineWidth: 0.5},';} if ($line_amount > 4) {echo ' {color:"#a0d7ff",lineWidth: 0.75},';} if ($line_amount > 3) {echo ' {color:"#90c0f8",lineWidth: 1},';} if ($line_amount > 2) {echo ' {color:"#80a7f0",lineWidth: 2},';} if ($line_amount > 1) {echo ' {color:"#7090e8",lineWidth: 3.5},';} if ($line_amount > 0) {echo ' {color:"#2030f0",lineWidth: 4,fill:false}';} echo ' ], cursor:{ zoom:true, showTooltip:false, //constrainZoomTo:"x", dblClickReset:true } })});</script>'."\n\r\n\r"; } function draw_bar_chart ($line,$maxY=50,$width=980,$height=333) { //line1 = [['<frogs> & lizards', 3], ['buzzards & gizzards', 7], ['deer & beef', 2.5], ['turkeys & vulures', 6], ['moles & voles', 5], ['ground hogs & beets', 4]]; //line2 = [3, 7, 2.5, 6, 5, 4]; // plot2 = $.jqplot('chart2', [line1], { // title: 'Pie Chart with Legend and sliceMargin', // seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:8}}, // legend:{show:true, escapeHtml:true} // }); global $chartdivcounter; $chartdivcounter++; if (is_string($line)) { //string } elseif (is_array($line)){ //array } echo '<div id="chartdiv'.$chartdivcounter.'" style="width:'.$width.'px; height:'.$height.'px;"></div>'; echo '<script type="text/javascript" language="javascript"> $(document).ready(function(){ plot'.$chartdivcounter.' = $.jqplot("chartdiv'.$chartdivcounter.'", [['.$line.']],{ legend: {show: false}, seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { barPadding: 2, barMargin: 4 } }, highlighter: { sizeAdjust: 12, tooltipLocation: "ne", tooltipAxes: "y", lineWidthAdjust:2, tooltipFormatString: "<span style='."'".'color:blue;'."'".'>%s</span>", useAxesFormatters: false }, grid: { drawGridLines: true, gridLineColor: "#ebebff", background: "#f7f7ff", borderColor: "#e0e0ff", borderWidth: 2.0, shadow: true, shadowAngle: 45, shadowOffset: 1.5, shadowWidth: 3, shadowDepth: 3, shadowAlpha: 0.07, renderer: $.jqplot.CanvasGridRenderer, rendererOptions: {} }, series:[ {color:"#7090e8",lineWidth: 3} ], axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, }, yaxis:{ min:0, max:'.$maxY.' } } }); }); </script>'."\n\r\n\r"; } function draw_vert_bar_chart ($line,$maxX=50,$width=980,$height=333) { global $chartdivcounter; $chartdivcounter++; if ($width == -1) {$width=980;} if (is_string($line)) { //string } elseif (is_array($line)){ //array } echo '<div id="chartdiv'.$chartdivcounter.'" style="width:'.$width.'px; height:'.$height.'px;"></div>'; echo '<script type="text/javascript" language="javascript"> $(document).ready(function(){ plot'.$chartdivcounter.' = $.jqplot("chartdiv'.$chartdivcounter.'", [['.$line.']],{ legend: {show: false}, seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { barDirection: "horizontal", barPadding: 2, barMargin: 4 } }, highlighter: { sizeAdjust: 12, tooltipLocation: "ne", tooltipAxes: "x", lineWidthAdjust:2, tooltipFormatString: "<span style='."'".'color:blue;'."'".'>%s</span>", useAxesFormatters: false }, grid: { drawGridLines: true, gridLineColor: "#ebebff", background: "#f7f7ff", borderColor: "#e0e0ff", borderWidth: 2.0, shadow: true, shadowAngle: 45, shadowOffset: 1.5, shadowWidth: 3, shadowDepth: 3, shadowAlpha: 0.07, renderer: $.jqplot.CanvasGridRenderer, rendererOptions: {} }, series:[ {color:"#7090e8",lineWidth: 3} ], axes: { yaxis: { renderer: $.jqplot.CategoryAxisRenderer, }, xaxis:{ min:0, max:'.$maxX.' } } }); }); </script>'."\n\r\n\r"; } ?>
igordata Вы меня маленько не правильно поняли. Попробую поконкретнее объяснить то, что мне нужно конкретно изменить в выводимом графике. За основу я взял график с изменяемыми данными и выводом результата в виде линии тренда. Немного поковыряв я отключил опцию изменения входящих данных оператором (с помощью мыши) и данные вношу по запросу из БД. Вот скрипт графика: Код (Text): <script type="text/javascript"> $(function(){ line1=[20, 20, 20, 50, 40, 60, 50, 70, 80, 75, 60, 33]; $.jqplot("example5", [line1], { title: "" } ); }); </script> Вот подключаемые файлы: Код (Text): script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.1.0.0a_r701/dist/jquery.jqplot.min.js"></script> <link rel="stylesheet" href="jquery.jqplot.1.0.0a_r701/dist/jquery.jqplot.min.css" type="text/css"/> <script type="text/javascript" src="jquery.jqplot.1.0.0a_r701/dist/plugins/jqplot.dragable.min.js"></script> <script type="text/javascript" src="jquery.jqplot.1.0.0a_r701/dist/plugins/jqplot.trendline.min.js"></script> Мне надо точно (не программно) обозначить шкалы (горизонтальную и вертикальную) своими мерками, а не тем, что мне туда рисует плагин. Потому я и ищу перевод мануала плагина на Русский язык. С некоторыми функциями данного плагина я разобрался самостоятельно, а с данным графиком не могу.
я не понимаю вопроса все равно. что значит "обозначить шкалы своими мерками"? Ярлычки приписать? шкалу разметить?
Есть график : Код (Text): <div id="chart" style="height:320px; width:100%;"></div> <script language="javascript"> $(document).ready(function(){ line7 = [3, 50, 50, 50, 40, 60, 50, 70, 80, 75, 60, 33]; line8 = [10, 2, 20, 20, 40, 10, 25, 10, 5, 10, 5, 30]; line9 = [15, 23, 25, 30, 20, 30, 25, 20, 15, 15, 25, 27]; plot2 = $.jqplot('chart', [line7, line8, line9], { legend:{show:true, location:'ne', xoffset:12}, seriesDefaults:{ renderer:$.jqplot.BarRenderer, rendererOptions:{barPadding: 3, barMargin: 20} }, series:[ {label:'Выполнено'}, {label:'В работе'}, {label:'Отказ'} ], axes:{ xaxis:{ renderer:$.jqplot.CategoryAxisRenderer, ticks:['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек' ] }, yaxis:{min:0, max:100 } } }); });</script> Как мне правильно построить запрос (или запросы), что бы внести данные в Код (Text): line7 = [3, 50, 50, 50, 40, 60, 50, 70, 80, 75, 60, 33]; line8 = [10, 2, 20, 20, 40, 10, 25, 10, 5, 10, 5, 30]; line9 = [15, 23, 25, 30, 20, 30, 25, 20, 15, 15, 25, 27]; Линия 7 - иды записей равны 1, Линия 8 - иды записей равны 3, Линия 9 -иды записей равны 2. Не могу понять как можно выбрать данные (точнее количество записей с идом 1 за янв, февр, март,..... затем с идом 3 и идом 2)?
igordata Как и в том посте (про окрашивание строк по идам), я обращаюсь к той же таблице, к тем же идам. Так колличество ид=1 за январь - это первая цифра в line7. Колличество ид=2 за январь - это первая цифра в line8 И т.д.
Идентификатор, так сказать типа записи. Например: таблицасодержит заказы. Выполненные заказы sost_id (идентификатор) равен 1, Заказы в работе sost_id = 3, отмененные заказы sost_id=2. Так понятнее? Выбрать их можно, но придется строить гору запросов (36 штук). Можно ли решить это более удобным способом?
Мда, так и нет способов полегче чем гора запросов? Я решил пока только этим способом((( Многовато кода получилось, хотя работает.