相关疑难解决方法(0)

如何自定义Chart.js 2.0 Donut Chart的工具提示?

我正在尝试使用Chart.js2中的圆环图显示一些数据.

我目前的图表如下所示:

目前的图表

我想要的输出必须显示另一个属性,即百分比,如下所示:

所需的图表与百分比

我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手.

我的第一个图表的代码如下:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ] …
Run Code Online (Sandbox Code Playgroud)

javascript customization tooltip chart.js2

22
推荐指数
3
解决办法
5万
查看次数

如何使用 ChartJS 向下钻取图表?

我很惊讶我发现几乎没有关于这个主题的信息。

我有一个 ChartJS 饼图,我想在单击饼图的一部分后深入查看。

你会怎么做?

谢谢

javascript jquery drilldown pie-chart chart.js

11
推荐指数
1
解决办法
1万
查看次数

在 ChartJS 中获取 X、Y onClick 图表坐标

如何使用 ChartJS V > 2.0 中的 onClick 事件获取相对于图表的 X、Y 坐标?

这个 JSFiddle为例。在 中创建分散#canvas。单击图表的中心时,即使那里没有数据点,我也应该得到 0, 0 。

javascript click onclick onclicklistener chart.js

5
推荐指数
2
解决办法
6304
查看次数

如何在chart.js中的单个条中单击时显示Bootstrap模态

我正在使用chart.js开展项目.我想在图表js中单击单个条而不是工具提示时显示引导模式.现在我正在使用chart id的onclick函数来显示一个bootstrap模态.有没有办法让它变得可能.?

这是我的代码:

HTML:

   <div class="chart1">
     <canvas id="barchart5"></canvas>
   </div>

 <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JAVASCRIPT:

 <script type="text/javascript">
   var data5 ={
   labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
   datasets : [
   {
     fillColor : "#F64747",
     strokeColor …
Run Code Online (Sandbox Code Playgroud)

javascript jquery twitter-bootstrap bootstrap-modal chart.js

3
推荐指数
1
解决办法
3928
查看次数

Chart Js可点击栏

我想让我的图表js栏可点击.我想添加点击功能,例如链接.不知道如何继续.已阅读文档时间10 ...

<script> var ctx = document.getElementById('myChart').getContext('2d');


var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
labels: ['Now', '-1h', '-2h', '-3h', '-4h', '-5h', '-6h', '-7h', '-8h', '-9h', '-10h', '-11h', '-12h', '-13h', '-14h', '-15h', '-16h', '-17h', '-18h', '-19h', '-20h', '-21h', '-22h', '-23h'],
datasets: [{
  label: 'Litraa',
  data: [<?php echo "$chart_readings[0]";?>, <?php echo "$chart_readings[1]";?>, <?php echo "$chart_readings[2]";?>, <?php echo "$chart_readings[3]";?>, <?php echo "$chart_readings[4]";?>, <?php echo "$chart_readings3[5]";?>, <?php echo "$chart_readings3[6]";?>, <?php echo "$chart_readings[7]";?>, <?php echo "$chart_readings[8]";?>, <?php echo "$chart_readings[9]";?>, <?php echo "$chart_readings[10]";?>, …
Run Code Online (Sandbox Code Playgroud)

javascript php charts chart.js

3
推荐指数
1
解决办法
1万
查看次数