Рисование диаграмм на холсте html5 с использованием jqplot - PullRequest
Новая
       22

Рисование диаграмм на холсте html5 с использованием jqplot

0 голосов
/ 03 октября 2011

Я использую диаграммы jqplot для рисования различных диаграмм на холсте html5. Все диаграммы работают хорошо во всех браузерах, но вертикальные столбцы (сгруппированные и кластеризованные) и линейные графики перекрываются в сафари. Есть причина, почему это происходит?

Следующие строки кода, которые я использовал для построения кластеризованной гистограммы: 

function DrawChart(chartId, chartType, categories, seriesWithData, grouping)
{

 /*for(var i=0;i<seriesWithData.length;i++)
 {
          eachSeriesArr = seriesWithData[i].split(";");
          seriesLabels[i] = eachSeriesArr.splice(0,1);
          eachSeriesArr.splice(eachSeriesArr.length-1, 1);

          for(var j=0; j<eachSeriesArr.length;j++)
          {
              eachSeriesArr[j] = Math.round(eachSeriesArr[j]).toString();
          }

          globalSeriesArr.push(eachSeriesArr);
 } */

 // Testing with hard coded value
 var s1 = [2, 6, 7, 10];
 var s2 = [7, 5, 3, 4];
 var s3 = [14, 9, 3, 8];

 plotChart = $.jqplot(chartId, [s1,s2,s3], {
  seriesDefaults:{
    showLabel: true,
     renderer:$.jqplot.BarRenderer,                        
     rendererOptions: {
        fillToZero: true,
        //showDataLabels: true,
       barDirection: 'vertical',
     },
     pointLabels: {show: true}
     },                
   axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
        autoscale: true,
    },
    axes: {
       // Use a category axis on the x axis and use our custom ticks.
     xaxis: {
       renderer: $.jqplot.CategoryAxisRenderer,                                         
       ticks: categories,                                    
     },                                
    yaxis: { pad: 1.0 }
    },
    legend: {show: true, placement: 'outside', location: 'e' },
});
}
//This is the canvas div in html file

<div id="rId2" style="width:640px;height:426px;"></div>
<script type="text/javascript">
   $(document).ready(function(){

     alert('document loaded completely');

 DrawChart('rId2', 'barChart;col', new Array(
      "Category 1",
      "Category 2",
      "Category 3",
      "Category 4"
     ), new Array(
      "Series 1;4.3;2.5;3.5;4.5;",
      "Series 2;2.4;4.4000000000000004;1.8;2.8;",
      "Series 3;2;2;3;5;"
    ), 'clustered')
 });
 </script>

`

Я вызываю эту функцию (определенную в файле javascript) для функции готовности документа из файла html

Чего-то не хватает?

...