2013-06-20 3 views
1

Я рисования линий на холсте, используя данные, предоставленные в формате JSON объекта:Pass JSON значение ключа данных для работы

var data = { values:[ 
{ X: "04-28", Xt: "7:45 pm", Ys: 116, Yd: 74, Yp: 0}, 
{ X: "04-29", Xt: "2:00 am", Ys: 112, Yd: 73, Yp: 0}, 
// 

Используя немного JQuery, чтобы нарисовать линию:

c.lineWidth = 4; 
c.strokeStyle = '#f00'; 
c.beginPath(); 
c.moveTo(getXPixel(0), getYPixel(data.values[0].Ys)); 
for(var i = 1; i < data.values.length; i ++) { 
    c.lineTo(getXPixel(i), getYPixel(data.values[i].Ys)); 
} 
c.stroke(); 

Для нарисовать несколько строк (позаботиться о «Yd» и «Yp» и о любых других строках, которые могут понадобиться позже). Я хотел бы переместить этот бит в функцию, которую я мог бы назвать с помощью:

drawLine(4, '#f00', 'Ys'); 

Функция Я пробовал:

function drawLine(width, style, d) { 
    c.lineWidth = width; 
    c.strokeStyle = style; 
    c.beginPath(); 
    c.moveTo(getXPixel(0), getYPixel(data.values[0].d)); 
    for(var i = 1; i < data.values.length; i ++) { 
     c.lineTo(getXPixel(i), getYPixel(data.values[i].d)); 
    } 
    c.stroke(); 
} 

не работает. Нет ошибки, но ни одна строка не нарисована. Он работает, если я положил «Ys» непосредственно в функцию. Как передать этот бит в качестве аргумента?

+0

Является ли 'c' переменная доступна из' DrawLine() '? – Jake

+0

также ваши данные.значения ничего не сделают ... поскольку вы не передаете массив данных в функцию ..... вам нужно передать этот массив, а затем цикл и рисовать – KyleK

ответ

2

Не нужно свойство dvalues[i], вы хотите, чтобы свойство значения строки находилось в d. Вы должны использовать obj[d], не obj.d как:

function drawLine(width, style, d) { 
    c.lineWidth = width; 
    c.strokeStyle = style; 
    c.beginPath(); 
    c.moveTo(getXPixel(0), getYPixel(data.values[0][d])); 
    for(var i = 1; i < data.values.length; i ++) { 
     c.lineTo(getXPixel(i), getYPixel(data.values[i][d])); 
    } 
    c.stroke(); 
} 

Например:

var obj = { a:1, b:2, c:3 }; 
console.log(obj.a); // 1 
console.log(obj['a']); // 1  
var a = 'b'; 
console.log(obj.a); // 1, still 
console.log(obj[a]); // 2, because the var a == 'b' as if: 
console.log(obj['b']); // 2 
+0

Спасибо за отличное объяснение! :) – Ragamffn