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

我不熟悉C3图表。我在的文档中找到了缩放功能。它将适用于鼠标滚轮滚动。但是我想在两个单独的按钮中实现zoomin和zoomout。谁能给我指路吗

---

提前感谢。

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

var图表=c3.generate({
数据：{
栏目：[
[‘样本’、30、200、100、400、150、250、150、200、170、240、350、150、100、400、150、250、150、200、170、100、150、250、150、150、200、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、120、70、40]
]
},
缩放：{
启用：对，
重新缩放：正确，
onzoom:函数（域）{
console.log（“缩放”，域）；
}
}
});
var-zoom=1；
var zoom_系数=1.1；
var min=0；
var max=chart.data（）[0].values.length；
$（“#放大”）。单击（函数（）{
如果（zoom1）缩放/=缩放系数；
日志（“缩小”，最小，最大，缩放）；
图表缩放（[min，max/zoom]）；
});
$（“#缩放重置”）。单击（函数（）{
缩放=1；
console.log（“缩放重置”、最小、最大、缩放）；
图表缩放（[min，max/zoom]）；
});

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


var图表=c3.generate({
数据：{
栏目：[
[‘样本’、30、200、100、400、150、250、150、200、170、240、350、150、100、400、150、250、150、200、170、100、150、250、150、150、200、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、120、70、40]
]
},
缩放：{
启用：对，
重新缩放：正确，
onzoom:函数（域）{
console.log（“缩放”，域）；
}
}
});
var-zoom=1；
var zoom_系数=1.1；
var min=0；
var max=chart.data（）[0].values.length；
$（“#放大”）。单击（函数（）{
如果（zoom1）缩放/=缩放系数；
日志（“缩小”，最小，最大，缩放）；
图表缩放（[min，max/zoom]）；
});
$（“#缩放重置”）。单击（函数（）{
缩放=1；
console.log（“缩放重置”、最小、最大、缩放）；
图表缩放（[min，max/zoom]）；
});

放大
缩小
变焦复位
这里有一个解决方案，它与鼠标滚动一起工作，并保留当前滚动位置


var图表=c3.generate({
数据：{
栏目：[
[‘样本’、30、200、100、400、150、250、150、200、170、240、350、150、100、400、150、250、150、200、170、100、150、250、150、150、200、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、120、70、40]
]
},
缩放：{
启用：对，
重新缩放：正确，
onzoom:函数（域）{
console.log（“缩放”，域）；
}
}
});
var zoom_因子=3；
var min=0；
var max=chart.data（）[0].values.length；
$（“#放大”）。单击（函数（）{
const zoom=chart.zoom（）；
const newZoom=[缩放[0]+缩放因子，缩放[1]-缩放因子]；
if（newZoom[1]-newZoom[0]>0）chart.zoom（newZoom）；
});
$（“#缩小”）。单击（函数（）{
const zoom=chart.zoom（）；
//绑定缩放到最小值和最大值
图表缩放（[Math.max（缩放[0]-缩放因子，最小值），Math.min（缩放[1]+缩放因子，最大值）]；
});
$（“#缩放重置”）。单击（函数（）{
控制台日志（“缩放重置”，最小值，最大值）；
图表缩放（[min，max]）；
});

放大
缩小
变焦复位
这里有一个解决方案，它与鼠标滚动一起工作，并保留当前滚动位置


var图表=c3.generate({
数据：{
栏目：[
[‘样本’、30、200、100、400、150、250、150、200、170、240、350、150、100、400、150、250、150、200、170、100、150、250、150、150、200、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、120、70、40]
]
},
缩放：{
启用：对，
重新缩放：正确，
onzoom:函数（域）{
console.log（“缩放”，域）；
}
}
});
var zoom_因子=3；
var min=0；
var max=chart.data（）[0].values.length；
$（“#放大”）。单击（函数（）{
const zoom=chart.zoom（）；
const newZoom=[缩放[0]+缩放因子，缩放[1]-缩放因子]；
if（newZoom[1]-newZoom[0]>0）chart.zoom（newZoom）；
});
$（“#缩小”）。单击（函数（）{
const zoom=chart.zoom（）；
//绑定缩放到最小值和最大值
图表缩放（[Math.max（缩放[0]-缩放因子，最小值），Math.min（缩放[1]+缩放因子，最大值）]；
});
$（“#缩放重置”）。单击（函数（）{
控制台日志（“缩放重置”，最小值，最大值）；
图表缩放（[min，max]）；
});

放大
缩小
变焦复位
谢谢@beaver。但不幸的是，当我点击放大按钮时，我的图表没有放大。没有错误。手动滚动鼠标时，它正在工作。知道为什么吗？你的代码运行得很好。但当我在代码中实现时，它就不起作用了。当我在控制台中触发chart.zoom（）时，我在您的代码中找到了我得到的chart.zoom（）；（2） [-0.53，-0.53]但是当我在我的系统中这样做时，我会得到一个日期值…（2）[Thu Jan 01 1970 05:30:00 GMT+0530（印度标准时间），Thu Jan 01 1970 05:30:00 GMT+0530（印度标准时间）]。原因可能是什么？请分享你的代码。否则就不可能检查您的实现！谢谢@beaver。但不幸的是，当我点击放大按钮时，我的图表没有放大。没有错误。手动滚动鼠标时，它正在工作。知道为什么吗？你的代码运行得很好。但当我在代码中实现时，它就不起作用了。当我在conso中触发chart.zoom（）时，我在你的代码中找到了什么