Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 移动VAX-谷歌图表_Javascript_Css_Charts_Google Visualization - Fatal编程技术网

Javascript 移动VAX-谷歌图表

Javascript 移动VAX-谷歌图表,javascript,css,charts,google-visualization,Javascript,Css,Charts,Google Visualization,在我前面的问题()之后,由于我不能移动轴本身,我发现轴的文本有一个x位置。我想知道我是否能改变这个职位。大概是这样的: $("[x=845]").each(function(){ x = 800; }) 当然,这是可能的,图表是使用svg绘制的, 一旦图表的'ready'事件触发, 您可以使用svg元素,类似于使用html元素 但是很难计算出标签的确切位置, 特别是如果图表的大小是响应性的 有关示例,请参见下面的工作代码段, 图表边界用于帮助放置, 然而,图表确实有

在我前面的问题()之后,由于我不能移动轴本身,我发现轴的文本有一个x位置。我想知道我是否能改变这个职位。大概是这样的:

    $("[x=845]").each(function(){
      x = 800;
    })

当然,这是可能的,图表是使用svg绘制的,
一旦图表的
'ready'
事件触发,
您可以使用svg元素,类似于使用html元素

但是很难计算出标签的确切位置,
特别是如果图表的大小是响应性的

有关示例,请参见下面的工作代码段,
图表边界用于帮助放置,
然而,图表确实有一个设定的宽度

google.charts.load('current'{
软件包:['corechart']
}).然后(函数(){
var data=google.visualization.arrayToDataTable([
['x','y0','y1','y2','y3'],
[A',15,30,65,100],
[B',12,32,67,101],
[C',14,32,67,101],
[D',18,33,68,110],
[E',17,33,68,110],
[F',17,45,70,112],
[G',18,46,71,113],
[H',22,47,72,110],
[I',24,47,72,112],
[J',20,47,72,105],
[K',17,45,70,105],
[L',17,33,68,104],
[M',16,33,68,105],
[N',15,32,67,103]
]);
var container=document.getElementById('chart_div');
var chart=新的google.visualization.LineChart(容器);
google.visualization.events.addListener(图表'ready',函数(){
var chartLayout=chart.getChartLayoutInterface();
var chartBounds=chartLayout.getChartAreaBoundingBox();
labelBounds变种;
var-labelGap;
var labelIndex=-1;
变异标签宽度;
var xCoord;
var labels=container.getElementsByTagName('text');
Array.prototype.forEach.call(标签,函数(标签){
//移动轴标签
如果((label.getAttribute('text-anchor')==='start')&&(label.getAttribute('fill')=='ff0000')){
labelIndex++;
labelBounds=chartLayout.getBoundingBox('vAxis#1#label#'+labelIndex);
labelWidth=labelBounds.width;
labelGap=chartBounds.left-parseFloat(label.getAttribute('x'));
xCoord=chartBounds.left+chartBounds.width+labelGap-labelWidth;
label.setAttribute('x',xCoord);
}
//移动轴标题
if((label.getAttribute('text-anchor')=='middle')&&(label.textContent=='var1')){
labelBounds=chartLayout.getBoundingBox('vAxis#1#title');
labelWidth=labelBounds.width;
labelGap=chartBounds.left-parseFloat(label.getAttribute('x'));
xCoord=chartBounds.left+chartBounds.width+labelGap+labelWidth;
var rotate='rotate(-90'+xCoord++'+label.getAttribute('y')++');
label.setAttribute('x',xCoord);
label.setAttribute('transform',rotate);
}
});
});
图表绘制(数据、{
图表区:{
右:136
},
系列:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:2},
3:{targetAxisIndex:3}
},
阀门:{
0:{title:'var0',textPosition:'in',textStyle:{color:'blue'},
1:{title:'var1',textPosition:'out',textStyle:{color:'red'}},
2:{title:'var2',textPosition:'in',textStyle:{color:'orange'}},
3:{title:'var3',textPosition:'out',textStyle:{color:'green'}}
},
宽度:1264
});
});

谢谢!!!这需要一些时间,但在你的帮助下,我会弄明白:):)