主页 / 问题 / 761737
Accepted
Денис
Asked:2020-12-22 13:51:12 +0000 UTC2020-12-22 13:51:12 +0000 UTC

c3.js 在圆环图标题上悬停时显示百分比

  • 772

我正在尝试掌握 c3.js 库。当鼠标悬停在图表或图例项上时，需要在图表中心显示该项的百分比值而不是标题。现在有一个铭文：“这是标签上的百分比。”

var chart = c3.generate({
  data: {
    columns: [
      ['Поле 1', 5],
      ['Поле 2', 25],
      ['Поле 3', 70],
    ],
    type: 'donut',
    onmouseover: function(d) {
      x = d.value;
      console.log("вернули", x);
    },
  },
  tooltip: {
    show: false, // отключаем меню при наведении на столбцы
    title: function(d) {
      return 'Data ' + d;
    },
  },
  donut: {
    label: {
      show: false //отключаем вывод процентов на самих столбцах
    },
    //title: function () {return x + '%'}, // не понятно как обновлять переменную
    title: 'тут проценты от label',

  },
  legend: {
    position: 'right',
  },
});
<script src="https://cdn.rawgit.com/pubnub/eon/master/lib/eon.css"></script>
<script src="https://cdn.rawgit.com/pubnub/eon/master/lib/eon.js"></script>
<script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
<div id="chart"></div>

javascript

1 个回答

  1. Best Answer

    这可以在 的帮助下完成jQuery。（标签值得写答案，但理论上没有它是可能的）

    浏览器的 DOM 资源管理器显示所需元素的类 ， 它是 SVG
    ，您需要替换其中之一的内容<text>...</text>
    $('.c3-chart-arcs-title').text(x);

    var chart = c3.generate({
  data: {
    columns: [
      ['Поле 1', 5],
      ['Поле 2', 25],
      ['Поле 3', 70],
    ],
    type: 'donut',
    onmouseover: function(d) {
       $('.c3-chart-arcs-title').text(d.value);
    },
  },
  tooltip: {
    show: false, // отключаем меню при наведении на столбцы
    title: function(d) {
      return 'Data ' + d;
    },
  },
  donut: {
    label: {
      show: false //отключаем вывод процентов на самих столбцах
    },
    //title: function () {return x + '%'}, // не понятно как обновлять переменную
    title: 'тут проценты от label',

  },
  legend: {
    position: 'right',
  },
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/pubnub/eon/master/lib/eon.css"></script>
<script src="https://cdn.rawgit.com/pubnub/eon/master/lib/eon.js"></script>
<script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
<div id="chart"></div>

    并且有可能甚至更好，如果jQuery它没有连接到项目中，使用基本 D3.js 库的功能，我们
    将代码替换为 d3.select('.c3-chart-arcs-title').text(x);

    它仍然要legend
    处理类似于它id返回的处理程序item

    var datain = [
  ['Поле 1', 5],
  ['Поле 2', 25],
  ['Поле 3', 70]
];

var chart = c3.generate({
  data: {
    columns: datain,
    type: 'donut',
    onmouseover: function(d) {
      donut_title(d.value);
    }
  },
  tooltip: {
    show: false, // отключаем меню при наведении на столбцы
  },
  donut: {
    label: {
      show: false //отключаем вывод процентов на самих столбцах
    },
    title: 'тут проценты от label'
  },
  legend: {
    position: 'right',
    item: {
      onmouseover: function(id) {
        var dataitem = datain.filter(function(rowdata) {
          return rowdata[0] == id;
        })[0];
        chart.focus(dataitem[0]);
        donut_title(dataitem[1]);
      }
    }
  }
});

function donut_title(x) {
  d3.select('.c3-chart-arcs-title').text(x);
}
    <!-- Load c3.css -->
<link href="https://rawgit.com/c3js/c3/master/c3.min.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<!-- C3 зависит от D3, поэтому, пожалуйста, загрузите D3 тоже. -->
<!-- C3 работает совместно с D3 предыдущей на данный момент 3-й версией -->
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/c3js/c3/master/c3.min.js"></script>

<div id="chart"></div>

    关于C3.JS
    关于D3.JS

    • 3

相关问题