Question

我正在使用HighCharts的饼图，它正在响应桌面。但是当我在移动设备上检查时它就像一个点[小圆]，在移动浏览器中看到时字体大小不可见，如何在移动视图中使字体大小变小，这是我的完整代码请帮我怎么做在移动视图中制作饼图。

 <html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "jquery.min.js">
      </script>
      <script src = "highcharts.js"></script>  
   </head>
 <body>
 <div id = "container" style = "width: 80%; height: 400px; margin: 0 auto"></div>
 <script language = "JavaScript">
 $(document).ready(function() {
var chart = {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
};
var title = {
    text: 'Browser market shares at a specific website, 2014'   
};
var tooltip = {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions= {
 pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    showInLegend: true,
    dataLabels: {
    enabled: false,                        
    formatter: function() {
        return this.percentage.toFixed(2) + '';
    }
    }                                   
}
};

var  legend={
    enabled: true,
    layout: 'vertical',
    align: 'middle',
    width:165,
    //height:100,
    verticalAlign: 'middle',
    useHTML: true,
    labelFormatter: function() {
    return '<table style="border:0"><tr><td style="font-size:19px;"> ' + this.name + ' - </td> <td style="font-size:19px;"> ' + this.y + ' </td></tr></table> <br />';
                }
    };
var series = [{
       type: 'pie',
       name: 'Browser share',
       data: [
          ['Firefox',   45.0],
          ['IE',       26.8],
          {
             name: 'Chrome',
             y: 12.8,
             sliced: true,
             selected: true
          },

          ['Safari',    8.5],
          ['Opera',     6.2],
          ['Others',   0.7]
       ]
    }];

 var responsive= {
    rules: [{
        condition: {
        maxWidth: 500
        },
        chartOptions: {
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'horizontal'
        },
        yAxis: {
            labels: {
                align: 'centre',
                x: 0,
                y: -5
            },
            title: {
                 text: 'Browser market shares at a specific website, 2015' 
            }
        },
        subtitle: {
            text: null
        },
        credits: {
            enabled: true
        }
        }
    }]
    };
            var json = {};   
            json.chart = chart; 
            json.title = title;  
        json.responsive = responsive;     
            json.tooltip = tooltip;  
        json.legend = legend;  
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);  
         });
      </script>
   </body>
</html>

高图的饼图在移动设备中无响应

0 个答案: