Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jqplot pionowe napisy
Forum PHP.pl > Forum > Przedszkole
icetab
Mam wykres liniowy ktory pokazuje temperature, i wlasnie glowie się jak zrobić aby godzina na dole wyswietlala się pionowo

  1.  
  2. <script language="javascript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  3. <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
  4. <script language="javascript" type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
  5. <script language="javascript" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>
  6. <script language="javascript" type="text/javascript" src="js/jqplot.highlighter.js"></script>
  7. <script language="javascript" type="text/javascript" src="js/jqplot.categoryAxisRenderer.js"></script>
  8. <script language="javascript" type="text/javascript" src="js/jqplot.canvasAxisTickRenderer.js"></script>
  9.  
  10.  
  11.  
  12. tempgodz = $.jqplot('tempgodz',[tempdziendzis],{
  13. title: 'Temperatura godzinowa (dziś)',
  14. seriesColors:['#8d4654'],
  15. grid: {
  16. shadow: false,
  17. borderWidth: 2
  18. },
  19.  
  20.  
  21.  
  22. axes: {
  23. xaxis: {
  24. renderer: $.jqplot.CategoryAxisRenderer,
  25.  
  26. ticks: [<?php echo $hd['h']; ?>],
  27. tickOptions: {
  28. fontSize: '6pt',
  29. formatString: '%#d'
  30. }
  31. },
  32. yaxis: {
  33. tickOptions: {
  34. formatString: '%.2f'
  35. }
  36. }
  37. },
  38. legend: {
  39. show: true,
  40. location: 'w',
  41. xoffset: 3
  42. },
  43. series: [
  44. {
  45. label: '°C',
  46. lineWidth: 3,
  47. shadow: false,
  48. markerOptions: {
  49. style:'filledSquare',
  50. shadow: false
  51. }
  52. }
  53.  
  54. ],
  55. highlighter: {
  56. tooltipLocation: 'n',
  57. tooltipAxes: 'y',
  58. sizeAdjust: 10
  59. },
  60. cursor: {
  61. show: false
  62. }
  63. });
trueblue
w css dodaj do poniższej reguły:
.jqplot-xaxis-tick{
transform: rotate(270deg);
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.