Как удалить всплывающую подсказку в гугл-чарте - PullRequest
Новая
       30

Как удалить всплывающую подсказку в гугл-чарте

2 голосов
/ 11 апреля 2019

Я работаю над Google-чартами, в которых у меня возникают некоторые проблемы

Я отображаю кольцевую диаграмму, которая содержит более 10 данных, поэтому то, что происходит, когда ширина отображения данных превышает ее, отображается во всплывающей подсказке, как

this

который я не хочу

То, что я пытаюсь сделать, например, сколько там заголовков, пусть это будет там, чтобы не вставлять их в подсказку 

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'right',
    },
    width: 'auto',

    height: 'auto'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

Я не хочу удалять легенды, я просто хочу показать их за один раз, а не показывать в подсказке, где пользователь должен нажать, чтобы увидеть другие легенды

Данные для проверки 

[["Outlet","Amount"],["CHEF BAKERS BROOKFIELD",738999],["CHEF BAKERS ARAKERE",106050],["CHEF BAKERS AMEENPUR",89358],["CHEF BAKERS AYYAPPA NGR",80088],["Chef Bakers Bellandur",321705],["CHEF BAKERS BRIGADE METROPOLIS",65088],["CHEF BAKERS BAGMANE CBP",145432],["CHEF BAKERS CHANDAPURA",92830],["DIVYA SREE TECHNO PARK",82946],["Chef Bakers Doddanekkundi",92590],["CHEF BAKERS SIDDAPURA",115142],["CHEF BAKERS ECITY",163745],["CHEF BAKERS VYDEHI",84367],["CHEF BAKERS HARLUR ROAD",101337],["Chef Bakers Hennur Main Road",18045],["CHEF BAKERS HSR LAYOUT",358232],["CHEF BAKERS BOTANICAL GARDEN",22256],["CHEF BAKERS KADUBEESANAHALLI",277964],["CHEF BAKERS COFFEE BOARD",164906],["Chef Bakers Kaggadasapura",73045],["Chef Bakers Koramangala",79381],["CHEF BAKERS KASAVANAHALLI",424056],["Chef Bakers Marathahalli 1",115410],["Chef bakers Marathahalli 2",105703],["Chef Bakers Mahadevapura",209014],["CHEF BAKERS BEL LAYOUT",58661],["CHEF BAKERS MG ROAD",70005],["CHEF BAKERS MANYATA TECH PARK",105590],["CHEF BAKERS NAGAWARA",47832],["CHEF BAKERS PRESTIGE SHANTHINIKETAN",135772],["CHEF BAKERS PRITECH",301201],["RGA TECH PARK",64525],["CHEF BAKERS RAMANTHAPUR",62752],["CHEF BAKERS RR NAGAR",94200],["Chef Bakers Kadugodi",353045],["CHEF BAKERS SARJAPURA ROAD",84425],["CHEF BAKERS SINGASANDRA",60735],["CHEF BAKERS SPICE GARDEN",135243],["Chef Bakers Whitefield",427212],["CHEF BAKERS YELAHANKA",293061]]

Ответы [ 3 ]

2 голосов
/ 11 апреля 2019

Вы можете использовать опцию -> legend.maxLines
, чтобы добавить больше строк в легенду.

примечание: эта опция работает только с -> legend.position = top

, см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'top',
      maxLines: 5
    },
    width: 'auto',
    height: 'auto'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>
1 голос
/ 11 апреля 2019

Вы можете попробовать это, 

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()
}

или 

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()/4
}

, делая это всегда, вы получите достаточное количество строк, чтобы вы могли иметь все свои легенды на одномстраницы и не обязательно иметь прокрутку 

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604],
    ["S00012", 1698604],
    ["S00013", 1698604],
    ["S00014", 1698604],
    ["S00015", 1698604],
    ["S00016", 1698604],
    ["S00017", 1698604],
    ["S00018", 1698604],
    ["S00019", 1698604]
  ]);
  


  var options = {
    pieHole: 0.3,
    legend: {
      position: 'top',
      maxLines: data.getNumberOfRows()
    },
    width: 'auto',

    height: 'auto'
  };
  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>
0 голосов
/ 11 апреля 2019

Проблема вызвана тем, что легенда на диаграмме занимает больше места, чем доступно в содержащем элементе.

Если вы хотите удалить легенду, которую я не рекомендую, поскольку диаграмма становится оченьнепонятно без него можно установить position: 'none' в настройках.

var options = {
  pieHole: 0.6,
  legend: {
    position: 'none',
  },
  width: 'auto',
  height: 'auto'
};
...