Question

我是C3图表的新手。我在C3的文档中找到了缩放功能。它适用于鼠标滚轮滚动。但我想要的是在两个单独的按钮中实现zoomin和zoomout。任何人都可以指引我走上正轨。

提前致谢。

Answer 1

以下是使用按钮管理的放大/缩小示例。但是，与鼠标滚轮不同，您必须决定使用哪个起点。

＆＃13;

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
        ]
    },
    zoom: {
        enabled: true,
        rescale: true,
        onzoom: function (domain) { 
        	console.log("zoom", domain);
        }
    }
});

var zoom = 1;
var zoom_factor = 1.1;
var min = 0;
var max = chart.data()[0].values.length;

$("#zoom-in").click(function() {
	if (zoom<5) zoom *= zoom_factor;
  console.log("zoom-in", min, max, zoom);
	chart.zoom([min, max/zoom]);
});

$("#zoom-out").click(function() {
	if (zoom>1) zoom /= zoom_factor;
  console.log("zoom-out", min, max, zoom);
	chart.zoom([min, max/zoom]);
});

$("#zoom-reset").click(function() {
	zoom = 1;
  console.log("zoom-reset", min, max, zoom);
	chart.zoom([min, max/zoom]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>

<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>

＆＃13;

Answer 2

这是一种解决方案，可以与鼠标动作配合使用并保留当前滚动位置。

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
        ]
    },
    zoom: {
        enabled: true,
        rescale: true,
        onzoom: function (domain) { 
        	console.log("zoom", domain);
        }
    }
});

var zoom_factor = 3;
var min = 0;
var max = chart.data()[0].values.length;

$("#zoom-in").click(function() {
	const zoom = chart.zoom();
	const newZoom = [zoom[0] + zoom_factor , zoom[1] - zoom_factor];
	if (newZoom[1] - newZoom[0] > 0) chart.zoom(newZoom);
});

$("#zoom-out").click(function() {
	const zoom = chart.zoom();
    // Bound zoom to min and max
	chart.zoom([Math.max(zoom[0] - zoom_factor, min), Math.min(zoom[1] + zoom_factor , max)]);
});

$("#zoom-reset").click(function() {
  console.log("zoom-reset", min, max);
	chart.zoom([min, max]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.js" type="text/javascript"></script>

<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>

如何在按钮单击上实现C3图表缩放功能

2 个答案: