Question

我有一个非常大的条形图。现在，工具提示会说“价值：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!

Answer 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();

D3Plus工具提示舍入值

1 个答案: