0

这是一个密码笔 https://codepen.io/nick-ladieu/pen/PobBbXM

这是我当前的 JS

    google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: "",
              chartArea: {
      left: '3%',
      top: '3%',
      height: '100%',
      width: '100%'
    },
          pieHole: 0.2,
          width:'100%',height:'100%',
           tooltip: {
              trigger: "none"
            },
          pieSliceBorderColor: "none",pieSliceText: "none",
           colors: ['green', 'blue', 'pink','orange', 'purple' ],
                legend: {
            position: "labeled",
            

          },
        };

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart2);
function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

我正在尝试制作一个响应式布局，其中包括一个圆环图，其中客户要求该图表包含标签线而不是图例。

我有点工作，但是当宽度减小到移动视图时图表标签被切断，我不确定如何动态减小图表大小以便标签可见

问题示例

4

1 回答 1

0

对我有用的是用css改变字体大小。通常你会希望你的移动字体更小，所以我的建议是：

.your-chart-class text {
font-size: 11px; /* or any other smaller font size you want */
}
于 2021-11-25T12:44:26.177 回答