点击按钮缩放canvasjs条形图
Zooming the canvasjs bar chart on button click
我正在尝试使用canvasjs.js
创建一个图表。
内置的canvasjs.js
通过在条形图上拖动鼠标来提供缩放和平移,但我需要在单击按钮时进行缩放和平移。这是我的代码,我试图在点击DrawGraph
按钮时创建一个图表。
<div id="chartContainer" style="height: 250px; width: 100%; margin: auto; border:1px solid black;">
</div>
<button type="button" id="zoom-in" onclick="DrawGraph()">
DrawGraph</button>
<button onclick="Reset()">Reset</button>
<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>
<script>
function DrawGraph() {
var arr=[];
for(i=0;i<100;i++)
{
if(i%2==0)
{
arr.push({x:i,y:10,color:"red"})
}
else
{
arr.push({x:i,y:10,color:"blue"})
}
}
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
width: 760, //Sets the Canvas Width
height: 150, // Sets the Canvas Height
theme: "theme3", // Sets the Theme (we have theme-1.theme-2,theme-3)- Default theme-1
// X axis Grid Thickness and Inteval that Points Should Represents (ex: 0-3000)
axisX: {
gridThickness: 0.0,
labelFontSize: 0.1, // x-axis label
tickLength: 0.0, // separation between the labels
lineThickness: 1, // x-axis Line thickness
minimum: 0,
},
// Y axis Grid Thickness and Inteval that Points Should Represents (ex: 0-3000)
axisY: {
gridThickness: 0.0,
interval: 10,
labelFontSize: 0.1,
tickLength: 0.0,
lineColor: "white", // Line Color Y-axis
lineThickness: 0.1
},
toolTip:{
enabled: false,
},
dataPointMaxWidth: 5, // Setting maximum width of columns
// X and Y value settings
data: [
{
type: "column",
click: onClick,
// mouseover: onMouseover,
dataPoints: arr
}]
});
// Canvas Js
chart.render();
// chart.Reset();
function onClick(e) {
alert(e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: " + e.dataPoint.y + " }");
}
}
</script>
下面是jsfiddle:jsfiddle
任何帮助都将不胜感激。提前谢谢。
您可以在axises上设置viewportMaximum和viewportMinimum值,并在v1.8(仍然是测试版)上渲染图表,但根据开发人员的说法,使用当前版本是不可能的。
Q: 此外,是否有对API进行缩放和平移的编程访问?所以我们可以实现快速缩放的缩放按钮,比如1周、1个月等等?
A: 到目前为止,还没有办法访问这些数据。但我正在考虑未来版本的API访问。
以下是有关v1.8的更多详细信息:http://canvasjs.com/blog/10/07/sync-multiple-chart-ranges-zoom-vertically
也许你可以考虑使用另一个图表库。http://www.highcharts.com/stock/demo/basic-line
相关文章:
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- Chart.js 2.1.2条形图动画问题
- 如何在Extjs5中更改条形图的标签
- d3.js条形图转换无法正常工作
- 从数组在d3中创建条形图时出现问题
- 条形图元素的HTML5 JavaScript锚点
- d3.js组条形图不起作用
- 图表.js:条形图点击事件
- 如何使用chartjs设置条形图中每个条形图的颜色
- Raphael.js条形图及教程
- 对d3堆叠条形图的数据进行排序
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- d3.js条形图未根据单击事件进行更新
- Chart.js条形图标签在悬停时被隐藏
- D3:如何更改现有条形图中的数据
- 点击按钮缩放canvasjs条形图