【问题标题】:D3Plus Tooltip Rounding ValuesD3Plus 工具提示舍入值
【发布时间】:2016-08-20 01:55:16
【问题描述】:

我有一个值非常大的条形图。现在,工具提示会显示“值:142M”,但我希望它显示确切的数量:141751760。我需要更改什么配置才能实现这一点?

// load your data
var sample_data = [
  {"date": "05 Aug", "name":"events", "value": 141751760},
  {"date": "06 Aug", "name":"events", "value": 137933833},
  {"date": "07 Aug", "name":"events", "value": 132537452},
  {"date": "08 Aug", "name":"events", "value": 120686130},
  {"date": "09 Aug", "name":"events", "value": 228518696},
  {"date": "10 Aug", "name":"events", "value": 133506681},
  {"date": "11 Aug", "name":"events", "value": 132956555},
  {"date": "12 Aug", "name":"events", "value": 129211690},
  {"date": "13 Aug", "name":"events", "value": 134858225},
  {"date": "14 Aug", "name":"events", "value": 116100660}
]
var attributes = [
  {"name": "events", "hex": "#178acc"}
]

// instantiate d3plus
var visualization = d3plus.viz()
  .container("#viz")  // container DIV to hold the visualization  
  .data(sample_data)  // data to use with the visualization 
  .type("bar")       // visualization type
  .id("name")         // key for which our data is unique on
  .y("value")         // key to use for y-axis
  .x("date")          // key to use for x-axis 
  .attrs(attributes) 
  .color("hex")
  .tooltip(["date", "value"])
  .draw()             // finally, draw the visualization!

【问题讨论】:

    标签: d3plus


    【解决方案1】:

    你没有显示任何代码,所以我不能给你一个工作示例。但是您可以添加格式以按照您想要的方式对其进行格式化:

    .format({
      "number": function(number, params) {
        return number; // No formatting
      }
    })
    

    您可以将其与条形图的其余部分链接起来。

    编辑:

    来自here的格式化函数

    function customFormat(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }
    var visualization = d3plus.viz()
      .container("#viz")  // container DIV to hold the visualization  
      .data(sample_data)  // data to use with the visualization 
      .type("bar")       // visualization type
      .id("name")         // key for which our data is unique on
      .format({
          "number": function(number, params) {
              return customFormat(number);
          }
      })
      .y("value")         // key to use for y-axis
      .x("date")          // key to use for x-axis 
      .attrs(attributes) 
      .color("hex")
      .tooltip(["date", "value"])
      .draw();
    

    【讨论】:

    • 我在原始问题中添加了代码 - 您能帮我解决如何格式化传统的逗号分隔数字而不是“142M”格式吗?
    • 感谢您的努力。向你致敬。
    猜你喜欢
    • 1970-01-01
    • 2020-08-21
    • 2023-02-16
    • 2015-09-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-22
    相关资源
    最近更新 更多