时间戳

首页 > 解决方案 > 在 c3js 中为双轴定制工具提示

javascript - 在 c3js 中为双轴定制工具提示

问题描述

我有一个图表，其中包含沿 y1 轴的收入和沿 y2 轴的收入增长。我想用 y1 的后缀和 y2 的 % 自定义工具提示。

我尝试根据 c3js 文档实现以下代码。

tooltip: {
    format: {
        value: function(value) {
            return d3.format(",") (value);
        }
    }
}

这会格式化两个轴的数千个值。我不确定如何为 y1 轴执行此操作，此外还为 y2 轴添加 % 。

作为 js 新手，我不确定如何继续。

标签： javascriptd3.jschartsc3.js

解决方案

您可以指定 y 和 y2 轴的值格式，如下所示：

tooltip: {
   format: {
      title: function (d) { return 'Data point ' + d; },
          // this sets tooltip title
      value: function (value, ratio, id) {
          var format = id === 'data1' ? d3.format(',') : function (d) { return  d + '%'; };
          return format(value);
      }   // this formats y and y2 values
   }
}

我为你创建了一个小提琴来测试这个功能：http: //jsfiddle.net/1kqcsywm/

这是相应的代码和可执行代码段：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
            ['data2', 100, 20, 10, 40, 15, 25]
        ],
        axes: {
            data2: 'y2'
        }
    },
    axis : {
        y : {
            tick: {
                format: d3.format("s")
            },
        		label: {
          			text: 'Revenue',
          			position: 'outer-middle'
        		}
        },
        y2: {
            show: true,
            tick: {
                format: function (d) { return  d + '%'; }
            },
            label: {
          			text: 'Revenue growth',
          			position: 'outer-middle'
        		}
        }
    },
    tooltip: {
        format: {
            title: function (d) { return 'Data point ' + d; },
            // this formats tooltip title
            value: function (value, ratio, id) {
                var format = id === 'data1' ? d3.format(',') : function (d) { return  d + '%'; };
                return format(value);
            }
            // this formats y and y2 values
        }
    }
});
.c3 svg {
  font: 10px sans-serif
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges
}

.c3-chart-arc path {
  stroke: #fff
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px
}

.c3-grid line {
  stroke: #aaa
}

.c3-grid text {
  fill: #aaa
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em
}

.c3-line {
  stroke-width: 1px
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px
}

.c3-bar {
  stroke-width: 0
}

.c3-bar._expanded_ {
  fill-opacity: .75
}

.c3-target.c3-focused {
  opacity: 1
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px
}

.c3-target.c3-defocused {
  opacity: .3!important
}

.c3-region {
  fill: #4682b4;
  fill-opacity: .1
}

.c3-brush .extent {
  fill-opacity: .1
}

.c3-legend-item {
  font-size: 12px
}

.c3-legend-item-hidden {
  opacity: .15
}

.c3-legend-background {
  opacity: .75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1
}

.c3-tooltip-container {
  z-index: 10
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: .9
}

.c3-tooltip tr {
  border: 1px solid #CCC
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999
}

.c3-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

.c3-tooltip td.value {
  text-align: right
}

.c3-area {
  stroke-width: 0;
  opacity: .2
}

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777
}

.c3-chart-arc .c3-gauge-value {
  fill: #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js">
</script>

<body>
<br><br>

<div id="chart" style="width: 95%; height: 270px"></div>

更多选项可以查看C3.js参考，相当不错：https ://c3js.org/reference.html

编辑：您可以为工具提示值组合逗号分隔符和前缀，如下所示：

tooltip: {
   format: {
      title: function (d) { return 'Data point ' + d; },
        // this formats tooltip title
        value: function (value, ratio, id) {
           var format = id === 'data1' ? function(d) { return "Rs. " + d3.format(",")(d); } : function (d) { return  d + '%'; };
           return format(value);
        }
        // this formats y and y2 values
    }
}

JSFiddle：http: //jsfiddle.net/vrqm8gof/

下面是完整的代码和可执行代码片段：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
            ['data2', 100, 20, 10, 40, 15, 25]
        ],
        axes: {
            data2: 'y2'
        }
    },
    axis : {
        y : {
            tick: {
                format: d3.format("s")
            },
        		label: {
          			text: 'Revenue',
          			position: 'outer-middle'
        		}
        },
        y2: {
            show: true,
            tick: {
                format: function (d) { return  d + '%'; }
            },
            label: {
          			text: 'Revenue growth',
          			position: 'outer-middle'
        		}
        }
    },
    tooltip: {
        format: {
            title: function (d) { return 'Data point ' + d; },
            // this formats tooltip title
            value: function (value, ratio, id) {
                var format = id === 'data1' ? function(d) { return "Rs. " + d3.format(",")(d); } : function (d) { return  d + '%'; };
                return format(value);
            }
            // this formats y and y2 values
        }
    }
});
.c3 svg {
  font: 10px sans-serif
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges
}

.c3-chart-arc path {
  stroke: #fff
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px
}

.c3-grid line {
  stroke: #aaa
}

.c3-grid text {
  fill: #aaa
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em
}

.c3-line {
  stroke-width: 1px
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px
}

.c3-bar {
  stroke-width: 0
}

.c3-bar._expanded_ {
  fill-opacity: .75
}

.c3-target.c3-focused {
  opacity: 1
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px
}

.c3-target.c3-defocused {
  opacity: .3!important
}

.c3-region {
  fill: #4682b4;
  fill-opacity: .1
}

.c3-brush .extent {
  fill-opacity: .1
}

.c3-legend-item {
  font-size: 12px
}

.c3-legend-item-hidden {
  opacity: .15
}

.c3-legend-background {
  opacity: .75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1
}

.c3-tooltip-container {
  z-index: 10
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: .9
}

.c3-tooltip tr {
  border: 1px solid #CCC
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999
}

.c3-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

.c3-tooltip td.value {
  text-align: right
}

.c3-area {
  stroke-width: 0;
  opacity: .2
}

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777
}

.c3-chart-arc .c3-gauge-value {
  fill: #000
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js">
</script>

<body>
<br><br>

<div id="chart" style="width: 95%; height: 270px"></div>

推荐阅读