天道酬勤,学无止境

获取隐藏在 C3js 上的价值数据(Get Value Data Hidden On C3js)

问题

我正在使用来自 c3js.org 的图表插件,如下所示:

data: {
    x : 'x',
    columns: [['data1',10,20,30],['data2',40,28,10]]
    type: 'bar',
    hide: ["hide1","hide2"],
    onclick: function(d,i){
                console.log(d);
    },
    labels: true
},

有没有办法从隐藏在上面的数据中获取价值?

之前谢谢,对不起,我的英语不好。

回答1

你是想隐藏数据,还是从点击事件中获取隐藏数组的值? 如果是后者,在 onclick 事件中,可以使用:

this.data.shown()

获取显示数据对象的数组。

回答2

如果您正在寻找隐藏值的数组,您可以对所有值和显示值进行差值处理。 使用 lodash 的不同(或者你可以自己写),它看起来像这样:

var allVals = chart.data();
var shownVals = chart.data.shown();
var diff = _.differenceBy(allVals, shownVals, 'id');
标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Get Value Data Hidden On C3js
    I'am using chart plugins from c3js.org like this: data: { x : 'x', columns: [['data1',10,20,30],['data2',40,28,10]] type: 'bar', hide: ["hide1","hide2"], onclick: function(d,i){ console.log(d); }, labels: true }, Is there a way to get value from data hidden above? Thanks before, and sorry for bad my english.
  • c3js 数据标签的位置(c3js position of data labels)
    问题 有没有可能的方法来改变c3条形图中数据上方的标签位置? 在官方文档中,很好地解释了如何通过操作 y 和 x 整数来更改 x 和 y 测量轴上标签的位置,但我没有找到任何数据标签。 我试图用c3所基于的普通d3指向它,但console.log返回我空: d3.selectAll(".c3-texts .c3-text").each(function () { var yOrigin = d3.select(this).attr('y'); console.log(yOrigin); }) 因为它在图形生成之前触发。 您可以在此处查看和编辑我正在处理的内容: var chart = c3.generate({ data: { columns: [ ['de', 30], ['da', 20], ['db', 50], ], groups: [ ['de', 'da', 'db'] ], type: 'bar', labels: { format: { y: function(v, id) { return id; }, } } }, grid: { y: { lines: [{ value: 0 }] } } }); d3.selectAll(".c3-texts .c3-text").each(function() { var yOrigin = d3.select(this)
  • 如何在c3js中更改工具提示内容(How to change tooltip content in c3js)
    问题 我正在处理时间轴显示,并且我想在工具提示上显示数据。 当前,它仅显示每次的值。 我找不到改变它的方法。 下面的示例显示如何更改值的格式,但不显示哪些值 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
  • Hide some graphic elements, c3js, without unloading data
    Is it possible to hide certain lines, bars and other graphic elements from a c3js chart, without unloading or hiding data? I wish to keep that data in the tooltip but hide some graphic elements. Hover over one bar and see data for other hidden bars. I know about the hide method - chart.hide(['data2', 'data3']); - but this also deletes the data from the tooltip. My question is not discussed in the documentation it seems. A similar issue in November was not solved. I don't have any code right now - just looking for an alternative to making a custom tooltip. Thanks
  • C3JS-无法读取未定义的属性“ category10”(C3JS - Cannot read property 'category10' of undefined)
    问题 我从jsfiddle(https://jsfiddle.net/varunoberoi/mcd6ucge)尝试了此c3.js代码,但它似乎在我的本地主机中不起作用。 我正在使用uniserver作为服务器。 我复制粘贴了所有内容,但无法正常工作。 <html> <head> <!-- CSS --> <link href="css/c3.css" rel="stylesheet" type="text/css" /> <!-- JAVASCRIPT --> <script src="js/d3.min.js" type="text/javascript"></script> <script src="js/c3.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ var chart = c3.generate({ data: { columns: [ ['data1', 300, 350, 300, 0, 0, 0], ['data2', 130, 100, 140, 200, 150, 50] ], types: { data1: 'area', data2: 'area-spline' } }, axis: { y: { padding
  • How to change tooltip content in c3js
    I'm working on a timeline display and I have data that I want to show on the tooltip. currently it only shows the value at each time. and I cannot find a way to change it. the example below shows how to change the value's format but not what values are displayed 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; }
  • c3js position of data labels
    Is there any possible way to change a positions of labels above the data in c3 bar chart? In official documentation there is well explained how to change positions of labels on x and y measurement axis with manipulation of y and x integer, but I did not found anything for data labels. I've tried to point to it with plain d3 on which c3 is based but console.log returns me null: d3.selectAll(".c3-texts .c3-text").each(function () { var yOrigin = d3.select(this).attr('y'); console.log(yOrigin); }) because it fires before graph generation. You can see and edit what I'm working on here: var chart =
  • 隐藏轴刻度值(Hide axis tick values)
    问题 有没有办法在 c3js(0.1.42 版)中隐藏轴刻度值? 在其中一张图中,我有带有长刻度值的分类轴。 我想隐藏它们并仅在鼠标悬停时显示。 我已经尝试了 http://c3js.org/samples/axes_x_tick_culling.html 中提到的刻度剔除选项(通过将 max 设置为 0),但它不起作用。 回答1 你可以试试这个: 在 tick format() 方法中返回空字符串,如下所示:- axis : { x : { type : 'categorized', tick: { format: function (x) { return ''; } } } } 回答2 使用下一个代码,您可以隐藏所有 x 轴刻度 .c3-axis-x .tick line { display: none; } 示例:jsfiddle 回答3 可能想尝试 css g.tick:hover text { fill: #000; } g.tick text { fill: none; pointer-events: all; }
  • C3JS - Cannot read property 'category10' of undefined
    I tried this c3.js code from jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) but it doesn't seem to work in my localhost. I'm using uniserver as my server. I copy-paste everything but it's not working. <html> <head> <!-- CSS --> <link href="css/c3.css" rel="stylesheet" type="text/css" /> <!-- JAVASCRIPT --> <script src="js/d3.min.js" type="text/javascript"></script> <script src="js/c3.js" type="text/javascript"></script> <script type="text/javascript"> window.onload=function(){ var chart = c3.generate({ data: { columns: [ ['data1', 300, 350, 300, 0, 0, 0], ['data2', 130, 100, 140, 200
  • 最初加载时,C3图表的大小太大(C3 chart sizing is too big when initially loaded)
    问题 我正在使用C3 JavaScript库来显示图形数据。 最初加载页面时,图形将被隐藏。 直到选择了页面上的“选项卡”,图形才显示出来。 我看到的问题是,第一次加载时,我的第一个图形不适合其包含的div标签。 我可以通过单击按钮来更改正在查看数据的日期范围,此时将正确调整图表的大小。 这是我用于图表的相关HTML(请注意,如果我使用AngularJS,以防万一,可以帮助/支持所有事情): <div class="chartgrouping"> <div ng-show="showGraphSection" class="graphA"> <h2 class="section-main-heading">Data A</h2> <div id="dataAChart" class="chart c3"></div> </div> <div ng-show="showGraphSection" class="graphB"> <h2 class="section-main-heading">Data B</h2> <div class="stats"> <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div> <div class="goals">GOAL: 20%<
  • 读取 JQuery 中隐藏列的值(Read Value of Hidden Column in JQuery)
    问题 我需要隐藏表格上的一列,但之后我无法读取所选行的隐藏列值。 dtTable = $('#lookupTable').DataTable({ "columnDefs": [ { "targets": [ 0 ], "visible": false, "searchable": false } ], aaData: data, aoColumns: cols, paging: false, scrollCollapse: true, destroy: true }); 如您所见,第一列现在已隐藏。 我正在尝试使用该代码读取列值 selectedIndex = $(this).find('td:eq(0)').text(); 如果我从代码中删除 <"visible": false> 我可以读取第一列的值,但如果它被隐藏,它会给我第二列值。 我厌倦了改变“witdh”属性,但它没有用.. 回答1 CSS 选择器不起作用,因为columnDefs中的"visible": false并不意味着该列获得等效的display: none; 标记中的样式属性。 相反,您必须使用 DataTables API 来获取隐藏列中的数据。 函数fnGetData可以解决问题。 它返回作为参数传递给函数的单元格中的文本数据。 这是文档中的示例 oTable.$('td').click( function
  • JavaScript:为隐藏字段重置真实格式(JavaScript: True form reset for hidden fields)
    问题 不幸的是,form.reset()函数不会重置表单的隐藏输入。 检入FF3和铬。 是否有人知道如何对隐藏字段进行重置? 回答1 似乎最简单的方法是显示:没有文本字段而不是隐藏字段。 在这种情况下,请定期执行默认重置过程。 回答2 不幸的是,按照标准,这是正确的。 不良的疣疣IMO。 IE仍然为隐藏字段提供可重置的defaultValue 。 请参阅此讨论:HTML5不会(可更改)。 (幸运的是,几乎不需要重置表单。作为UI功能,人们通常对此并不满意。) 由于您根本无法获得value属性的原始值,因此您必须将其复制到另一个属性中并进行获取。 例如。: <form id="f"> <input type="hidden" name="foo" value="bar" class="value=bar"/> function resetForm() { var f= document.getElementById('f'); f.reset(); f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value'); } function Element_getClassValue(el, classname) { var prefix= classname+'='; var classes= el
  • Hide axis tick values
    Is there a way to hide axis tick values in c3js (version 0.1.42)? In one of the graphs, I have categorical axis with long tick values. I want to hide them and show only on mouseover. I have tried the tick culling option (by setting max to 0) mentioned at http://c3js.org/samples/axes_x_tick_culling.html but it does not work.
  • 如何将 jquery 数组值发送到 codeigniter 上的控制器(How to send the jquery array value to controller on codeigniter)
    问题 我是 codeigniter 的新手,我从数据库中创建了一些记录列表,我的问题是如果我想使用复选框删除更多记录,我从 jquery 获取数组值作为字符串格式,但我不知道如何发送这个对控制器的价值,请告诉任何人 我的 jquery 代码多选记录 $('.del_mybuyer').click(function(){ var selected = new Array(); var inc = 0; $('input.selbuyer:checked').each(function(){ selected[inc] = $(this).attr('id'); inc = inc + 1; }) tdelbuy=selected.toString(); }) 这里 tdelbuy 工作正常,但我不知道如何在会话中设置它或如何将它发送到我的控制器,请告诉任何人 回答1 使用$.ajax 、 $.post或$.get 试试这个 $.post('path/to /your/controller',{data:tdelbuy},function(html){ alert(html); }); 并且您的控制器通过以下方式获取发布的值 var postedValue=$this->input->post('data'); //do your stuff. echo "done"; 回答2
  • 使用jQuery从隐藏字段中获取价值(Get value from hidden field using jQuery)
    问题 我有一个<input type="hidden" value="" id='h_v' class='h_v'>使用jQuery我想提醒用户该值。 我在用 var hv = $('#h_v).text(); alert('x'); 但是它不起作用,没有任何线索! 回答1 使用val()代替text() var hv = $('#h_v').val(); alert(hv); 您遇到了以下问题: 单引号未关闭您正在使用text()作为输入字段您在回显x而不是变量hv 回答2 如果您不想为隐藏字段分配标识符,请执行以下操作: 您可以将名称或类与选择器一起使用,例如: $('input[name=hiddenfieldname]').val(); 或指定的班级: $('input.hiddenfieldclass').val(); 回答3 这应该工作: var hv = $('#h_v').val(); alert(hv); 回答4 html <input type="hidden" value="hidden value" id='h_v' class='h_v'> js var hv = $('#h_v').attr("value"); alert(hv); 例子 回答5 var hiddenFieldID = "input[id$=" + hiddenField + "]"
  • POST未选中的HTML复选框(POST unchecked HTML checkboxes)
    问题 我有一堆默认情况下处于选中状态的复选框。 我的用户可能会取消选中某些复选框(如果有),而其余复选框保持选中状态。 有没有什么办法让表单POST未签,而不是被检查者的复选框? 回答1 为具有不同ID的复选框添加隐藏的输入: <input id='testName' type='checkbox' value='Yes' name='testName'> <input id='testNameHidden' type='hidden' value='No' name='testName'> 提交表单之前,请根据检查的条件禁用隐藏的输入: if(document.getElementById("testName").checked) { document.getElementById('testNameHidden').disabled = true; } 回答2 到目前为止,我最喜欢的解决方案是放置一个隐藏的输入,该输入与可能未选中的复选框的名称相同。 我认为这样做是可行的,因此,如果未选中此复选框,则隐藏的输入仍然会成功发送到服务器,但是如果选中此复选框,它将覆盖之前的隐藏输入。 这样,您就不必跟踪发布的数据中哪些值应该来自复选框。 <form> <input type='hidden' value='0' name='selfdestruct'> <input type=
  • 使用php获取所选选项的文本[重复](get the text of the selected option using php [duplicate])
    问题 这个问题已经在这里有了答案: 使用PHP从<option>标记获取文本(5个答案) 6年前关闭。 在下面的: <form action="test.php" method="POST"> <select id="test" name="test"> <option value="1">Test One</option> <option value="2">Test Two</option> </select> </form> 在test.php中,我可以得到1或2,如下所示: $result=$_POST['test']; 如何使用php获取所选选项的文本(即“测试一”或“测试二”) 回答1 这不是单独通过PHP可以完成的事情。 PHP脚本只能“查看”发布的信息(发布的selected选项的value )。 您可以使用javascript来更改带有选定option的文本内容的隐藏input字段,并且该字段将包含在$_POST数组中: <form action="test.php" method="POST"> <select id="test" onchange="document.getElementById('text_content').value=this.options[this.selectedIndex].text"> <option value="1"
  • 如何获取滑块引导程序的值?(How to get the value of the slider bootstrap?)
    问题 如何将滑块引导程序的值获取到隐藏的iput? <input type="hidden" name="min_value" id="min_value" value=""> <input type="hidden" name="max_value" id="max_value" value=""> $(function () { $("#slider-range-s1").slider({ range: true, min: 0, max: 500, value: [0, 500] }); }); 回答1 我认为它现在坏了。 文档状态: 方法 .slider('getValue') 获得价值。 但是,调用$('#sliderDivId').slider('getValue')返回jQuery选择器而不是值... 现在您可以从数据对象中手动获取它... $('#sliderDivId').data('slider').getValue() 回答2 快速修复: $.fn.slider = function (option, val) { if (typeof option == 'string') { if (this.length) { var data = this.eq(0).data('slider'); if (data) return data[option](val)
  • jQuery和TinyMCE:textarea值未提交(jQuery and TinyMCE: textarea value doesn't submit)
    问题 我正在使用jQuery和TinyMCE提交表单,但是序列化存在问题,因为Textarea值未发布。 这是代码: <form id="myForm" method="post" action="post.php"> <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea> </form> 语言:lang-js $('#myForm').submit(function() { $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data) { $('#result').fadeIn('slow'); $('#result').html(data); $('.loading').hide(); } }) return false; }); tinyMCE.init({ // General options mode : "textareas", theme : "advanced", // Theme options theme_advanced_buttons1 : "bold,italic
  • 如何在PHP页面之间传递数据?(How do I pass data between pages in PHP?)
    问题 简而言之,我有一个包含HTML表单的计算器,然后PHP代码对输入进行总计并显示总价。 在价格下方,它还会显示指向“ page2.php”的链接,该链接包含一个HTML表单,用户可以在其中输入其联系信息。 提交表格后,会将他们在价格计算器中在“ page1.php”上所做的选择以及在“ page2.php”上的联系信息通过电子邮件发送给我,然后将它们重定向到主页。 在提交给我的电子邮件中,我收到了来自“ page2.php”的联系信息,但没有收到来自“ page1.php”的任何信息,因此未正确传递变量。 除了每个页面上的PHP外,我还在“ page2.php”上的HTML表单中使用隐藏值来回显在“ page1.php”上的HTML表单中输入的数据。 我知道我的问题之一是当表单为“ post”时,我有几个$_GET字段。 但是,当我更改它以使所有内容都是$_POST ,计算器将不再起作用。 我试图将其与其他人建议的不同代码段放在一起。 “ page1.php”上的表单有13个字段,名为“一个”-“十三”。 $ total显示1-13的值。 <?php $submit = $_GET['submit']; if($submit == "true") { $total = ($_POST['one'] + $_POST['two'] + $_POST['three'] + $