c3js 中双轴的工具提示自定义
Tooltip customization in c3js for dual axis
我有一个图表,其中 y1 轴为收入,y2 轴为收入增长。我想用 y1 的后缀和 y2 的 % 自定义工具提示。
我已经尝试根据 c3js 文档实现以下代码。
tooltip: {
format: {
value: function(value) {
return d3.format(",") (value);
}
}
}
这会为两个轴设置数千个值的格式。我不确定如何为 y1 轴执行此操作以及为 y2 轴添加 %。
刚开始接触 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
}
}
我创建了一个 fiddle 供您测试此功能: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>
我有一个图表,其中 y1 轴为收入,y2 轴为收入增长。我想用 y1 的后缀和 y2 的 % 自定义工具提示。
我已经尝试根据 c3js 文档实现以下代码。
tooltip: {
format: {
value: function(value) {
return d3.format(",") (value);
}
}
}
这会为两个轴设置数千个值的格式。我不确定如何为 y1 轴执行此操作以及为 y2 轴添加 %。
刚开始接触 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
}
}
我创建了一个 fiddle 供您测试此功能: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>