如何使用谷歌图表确定y坐标？ [英] How to determine the y coordinate using google charts?

问题描述

我使用Google Charts使用多个不同的数据点绘制了线图。

我想知道如何确定图表上任何x值的y值，而不仅仅是数据点。

我绘制的图

例如，如何在x = 1000处找到y坐标？

<如果这是不可能的，使用谷歌图表什么库将最适合这项任务？

这是jsfiddle：< a href =http://jsfiddle.net/mhmpn3wo/1/ =nofollow> http://jsfiddle.net/mhmpn3wo/1/

Google可视化不提供API以在数据点之间获取数据。但是，我们可以使用数据点的x坐标和y值来计算y值（坐标是鼠标位置）。例如，有两点（10,100）和（20,200）。 （15）=（200 - 100）/（20 - 10）*（我们可以在x = 15时得到y值） 15-10）+ 100 = 150

f（x）=（y2 - y1）/（x2 - 我们需要数据点对的数组，如（x坐标，y值） ）。在Google LineChart中，数据点的坐标是 LineChart 对象的属性名称 $ m.xZ 。（<$ c $在$ LineChart.draw（）函数调用之后设置$> $ m.xZ

  var data = google.visualization.arrayToDataTable（[
 ['Year'，'Sales'，'Expenses']，
 ['2004'，1000， 400]，
 ['2005'，1170,460]，
 ['2006'，660，1120]，
 ['2007'，1030,540] 
]） ; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（data，{}）; 
 
 var lines = []; 
 
（图中的var propertyName。$ m.mZ）{
 var id = propertyName.split（'＃'）; 
 var coordinate = chart。$ m.mZ [propertyName] .center; 
 if（typeof lines [id [1]] ===undefined）{
 lines [id [1]] = []; $ {
} 
 lines [id [1]]。push（{x：coordinate.x，value：parseFloat（data.Ad [parseInt（id [2]）] [parseInt（id [1]） + 1] .Pe）}）; 
 
 $ / code> 

现在，行数组包含所有数据点的x坐标和y值对。我们需要在图表上附加鼠标移动事件处理程序。

  google.visualization.events.addListener（图表，'onmousemove'，mouseMoveHandler）; 
函数mouseMoveHandler（e）{
 var target = e.targetID.split（＃）; 
 if（target [0] ===line）{
 var currentLine = lines [parseInt（target [1]）]; 
 var count = currentLine.length; 
 for（var i = 0; i< count; i ++）{
 if（currentLine [i] .x> = ex）{
 var slope =（currentLine [i]。 value  -  currentLine [i  -  1] .value）/（currentLine [i] .x  -  currentLine [i  -  1] .x）; 
 var value =（（e.x  -  currentLine [i  -  1] .x）* slope + currentLine [i  -  1] .value）.toFixed（2）; 
 $（＃tooltip）.css（'left'，ex +px）.css（'top'，（ey  -  20）+px）.html（value）.show（） ; 
 
 break; 
} 
} 
} 
} 
  




I have drawn a line graph using Google Charts using a number of different data points.

I want to know how I can determine the y-value at any x-value on the graph and not just the data points.

"The graph that I have plotted"

For example how can I find the y coordinate at x = 1000 ?

If this is not possible using Google Charts what library would be best suited for this task?

解决方案

This is jsfiddle :http://jsfiddle.net/mhmpn3wo/1/

Google Visualization does not provide API to get data between data points. However, we can calculate y-values using x-coordinates and y-values of data points.(Coordinate is mouse position.) For example, there are two points (10, 100) and (20, 200). We can get y-value at x = 15 by

f(15) = (200 - 100) / (20 - 10) * (15 - 10) + 100 = 150

f(x) = (y2 - y1)/(x2 - x1) * (x1 - x) + y1 = y

We need array of data points pairs like (x-coordinate, y-value). In Google LineChart, coordinates of data points are property name $m.xZ of LineChart object.($m.xZ is set after LineChart.draw() function call)

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
]);

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {});

var lines = [];

for (var propertyName in chart.$m.mZ) {
    var id = propertyName.split('#');
    var coordinate = chart.$m.mZ[propertyName].center;
    if (typeof lines[id[1]] === "undefined") {
        lines[id[1]] = [];
    }
    lines[id[1]].push({x: coordinate.x, value: parseFloat(data.Ad[parseInt(id[2])][parseInt(id[1]) + 1].Pe)});
}

Now, lines array contains all pairs of x-coordinate and y-value of data points. We need to attach mouse move event handler on the chart.

google.visualization.events.addListener(chart, 'onmousemove', mouseMoveHandler);
function mouseMoveHandler(e) {
    var target = e.targetID.split("#");
    if (target[0] === "line") {
        var currentLine = lines[parseInt(target[1])];
        var count = currentLine.length;
        for (var i = 0; i < count; i++) {
            if (currentLine[i].x >= e.x) {
                var slope = (currentLine[i].value - currentLine[i - 1].value) / (currentLine[i].x - currentLine[i - 1].x);
                var value = ((e.x - currentLine[i - 1].x) * slope + currentLine[i - 1].value).toFixed(2);
                $("#tooltip").css('left', e.x + "px").css('top', (e.y - 20) + "px").html(value).show();

                break;
            }
        }
    }
}

这篇关于如何使用谷歌图表确定y坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！