文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在c3js中更改工具提示内容

问如何在c3js中更改工具提示内容
EN

Stack Overflow用户
提问于 2014-07-15 17:13:51
回答 4查看 32.7K关注 0票数 23

我正在处理时间线显示，并且我有要在工具提示上显示的数据。目前，它只显示每次的值。我找不到改变它的方法。下面的示例显示了如何更改值的格式，但不会更改显示的值

代码语言：javascript
复制
var chart = c3.generate({
data: {
    columns: [
        ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
        ['data2', 100, 200, 100, 40, 150, 250]
    ],
    axes: {
        data2: 'y2'
    }
},
axis : {
    y : {
        tick: {
            format: d3.format("s")
        }
    },
    y2: {
        show: true,
        tick: {
            format: d3.format("$")
        }
    }
},
tooltip: {
    format: {
        title: function (d) { return 'Data ' + d; },
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
           //value: d3.format(',') // apply this format to both y and y2
    }
}
});

它取自http://c3js.org/samples/tooltip_format.html，他们承认没有内容编辑的示例，但我在参考资料或论坛中找不到任何东西，但建议更改代码(在这里:第300行的https://github.com/masayuki0812/c3/blob/master/c3.js )和以下内容：

代码语言：javascript
复制
__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
        var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
            nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
            valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat,
            text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
            if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

            if (! text) {
                title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
            }

            name = nameFormat(d[i].name);
            value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
            bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id);

            text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
            text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
            text += "<td class='value'>" + value + "</td>";
            text += "</tr>";
        }
        return text + "</table>";
    })

有没有人尝试过这样做？开发了一些函数来简化这个过程？关于如何正确地这样做，有什么建议吗？我不知道如何更改他们的代码，我可以使用更多的数据或不同于函数获得的d值的数据。

javascript
d3.js
c3.js
EN

回答 4

Stack Overflow用户

发布于 2014-09-10 01:31:34

如果在tooltip.contents中使用https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27中的函数getTooltipContent并将其添加到图表声明中，您将获得与默认内容相同的工具提示内容。

您可以对此代码进行更改，并根据自己的喜好进行自定义。一个细节是，由于CLASS没有在当前作用域中定义，但它是部分图表对象，我用CLASS替换了$$.CLASS，也许您甚至不需要在代码中使用此对象。

代码语言：javascript
复制
var chart = c3.generate({
  /*...*/
  tooltip: {
      format: {
        /*...*/
      },
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
          var $$ = this, config = $$.config,
              titleFormat = config.tooltip_format_title || defaultTitleFormat,
              nameFormat = config.tooltip_format_name || function (name) { return name; },
              valueFormat = config.tooltip_format_value || defaultValueFormat,
              text, i, title, value, name, bgcolor;
          for (i = 0; i < d.length; i++) {
              if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

              if (! text) {
                  title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                  text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
              }

              name = nameFormat(d[i].name);
              value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
              bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

              text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
              text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
              text += "<td class='value'>" + value + "</td>";
              text += "</tr>";
          }
          return text + "</table>";
      }
  }
});
票数 48
EN

Stack Overflow用户

发布于 2016-04-22 16:45:31

如果你想根据数据值控制工具提示渲染和使用默认渲染，你可以使用如下所示：

代码语言：javascript
复制
tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        if (d[1].value > 0) {
            // Use default rendering
            return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color);
        } else {
            return '<div>Show what you want</div>';
        }
    },
    format: {
        /**/
    }
}
票数 9
EN

Stack Overflow用户

发布于 2017-05-22 12:05:22

在我的例子中，我必须在工具提示中添加日期值(x轴)的日期。最后我想出了下面的解决方案

js和css的引用

https://code.jquery.com/jquery-3.2.1.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css

​

代码语言：javascript
复制
function toDate(dateStr)
{
    var numbers = dateStr.match(/\d+/g);
    return new Date(numbers[0], numbers[1]-1, numbers[2]);
}
function GetMonthFromString(month)
{
    var months = {'Jan' : '01','Feb' : '02','Mar':'03','Apr':'04',
    'May':'05','Jun':'06','Jul':'07','Aug':'08','Sep':'09',
    'Oct':'10','Nov':'11','Dec':'12'};
    return months[month];
}
function GetFullDayName(formatteddate)
{
    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    var dayofdate = weekday[formatteddate.getDay()];
    return dayofdate;
}

//Chart Data for x-axis, OnHours and AvgHours
function CollectChartData()
{
    var xData = new Array();
    var onHoursData = new Array();
    var averageHoursData = new Array();
    var instanceOccuringDatesArray =  ["2017-04-20","2017-04-21","2017-04-22","2017-04-23","2017-04-24","2017-04-25","2017-04-26","2017-04-27","2017-04-28","2017-04-29","2017-04-30","2017-05-01","2017-05-02","2017-05-03","2017-05-04","2017-05-05","2017-05-06","2017-05-07","2017-05-08","2017-05-09","2017-05-10","2017-05-11","2017-05-12","2017-05-13","2017-05-14","2017-05-15","2017-05-16","2017-05-17","2017-05-18","2017-05-19","2017-05-20"];
        var engineOnHoursArray =  ["4.01","14.38","0.10","0.12","0.01","0.24","0.03","6.56","0.15","0.00","1.15","0.00","1.21","2.06","8.55","1.41","0.03","1.42","0.00","3.35","0.02","3.44","0.05","5.41","4.06","0.02","0.04","7.26","1.02","5.09","0.00"];
        var avgUtilizationArray =  ["2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29","2.29"];
        xData.push('x');
        onHoursData.push('OnHours');
        averageHoursData.push('Project Average');
        for(var index=0;index<instanceOccuringDatesArray.length;index++)
        {
            xData.push(instanceOccuringDatesArray[index]);
        }
        for(var index=0;index<engineOnHoursArray.length;index++)
        {
            onHoursData.push(engineOnHoursArray[index]);
        }
        for(var index=0;index<avgUtilizationArray.length;index++)
        {
            averageHoursData.push(avgUtilizationArray[index]);
        }
        var Data = [xData, onHoursData, averageHoursData];
        return Data;
    }


function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) {
    var $$ = this, config = $$.config, CLASS = $$.CLASS,
        titleFormat = config.tooltip_format_title || defaultTitleFormat,
        nameFormat = config.tooltip_format_name || function (name) { return name; },
        valueFormat = config.tooltip_format_value || defaultValueFormat,
        text, i, title, value, name, bgcolor;

    // You can access all of data like this:
    //$$.data.targets;

    for (i = 0; i < d.length; i++) {
        if (! text) {
                title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                var arr = title.split(" ");                
                var datestr = new Date().getFullYear().toString() + "-"+ GetMonthFromString(arr[1]) + "-"+ arr[0];                  
               var formatteddate = toDate(datestr);                   
               var dayname = GetFullDayName(formatteddate);
               title = title + " (" + dayname + ")";
                text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
            }

        name = nameFormat(d[i].name);
        var initialvalue = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
        if (initialvalue.toString().indexOf('.') > -1)
        {
            var arrval = initialvalue.toString().split(".");
            value = arrval[0] + "h " + arrval[1] + "m";
        }
        else
        {
            value = initialvalue + "h " + "00m";
        }
        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

        text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
        text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
        text += "<td class='value'>" + value + "</td>";
        text += "</tr>";
    }
    return text + "</table>";   
}
$(document).ready(function () {
     var Data = CollectChartData();
    var chart = c3.generate({
        data: {
                x: 'x',
                columns: Data
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        rotate: 75,
                        //format: '%d-%m-%Y'
                        format: '%d %b'
                    }
                },
                y : {
                    tick : {
                        format: function (y) {
                            if (y < 0) {
                            }
                            return y;
                        }
                    },
                    min : 0,
                    padding : {
                        bottom : 0
                    }
                }
            },
            tooltip: {
                contents: tooltip_contents
            }
    });
});
代码语言：javascript
复制
   <script src="https://code.jquery.com/jquery-3.2.1.js"></script>    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

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

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/24754239

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档