2016-10-20 75 views
1

我有一个问题。我相对较新的JavaScript,但我正在一个项目,人们希望有关于他们的改进图表。我成功制作了2张图表,而第三张图表确实存在问题。当y代表随机数时,数字由0.000yyyy组成,当您悬停图表时,信息显示为0.我将分数位数放在选项中,但无法让它们正确工作。Google Charts fractionDigits

下面是代码:

google.charts.load('current', {packages: ['corechart', 'line']}); 
google.charts.setOnLoadCallback(drawBackgroundColor); 

function drawBackgroundColor(transparent) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'X'); 
    data.addColumn('number', 'Xaurum Gold Growth'); 


    data.addRows([ 
[new Date(2015 , 03 , 15),0.000125], 
[new Date(2015 , 04 , 09),0.000125202590875], 
[new Date(2015, 04, 12), 0.000126019393875], 

    ]); 
var options = { 
    hAxis: { 
     title: 'Time', 
     textStyle:{color: '#FFF'}, 
     titleTextStyle: { 
    color: '#fff' 
} 
    }, 
    vAxis: { 
     title: 'Value', 
     textStyle:{color: '#FFF'}, 
     titleTextStyle: { 
    color: '#fff' 
} 
    }, 
    legend: { 
    textStyle: {color: '#fff'} 
}, 
NumberFormat: { 
    fractionDigits:15, 
}, 
annotations: { 
    boxStyle: { 
    stroke: '#765e34', 
    strokeWidth: 10, 
    } 
}, 
    backgroundColor: "transparent", 
    colors: ['#876c3c'], 


    }; 

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

回答

1

格式化数字的提示,使用NumberFormat,数据是建立

// format data 
    var formatter = new google.visualization.NumberFormat({ 
    fractionDigits: 15 
    }); 
    formatter.format(data, 1); 

看到下面的工作片段后...

google.charts.load('current', { 
 
    callback: drawBackgroundColor, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBackgroundColor(transparent) { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'X'); 
 
    data.addColumn('number', 'Xaurum Gold Growth'); 
 
    data.addRows([ 
 
    [new Date(2015 , 03 , 15), 0.000125], 
 
    [new Date(2015 , 04 , 09), 0.000125202590875], 
 
    [new Date(2015, 04, 12), 0.000126019393875] 
 
    ]); 
 

 
    // format data 
 
    var formatter = new google.visualization.NumberFormat({ 
 
    fractionDigits: 15 
 
    }); 
 
    formatter.format(data, 1); 
 

 
    var options = { 
 
    hAxis: { 
 
     title: 'Time', 
 
     textStyle:{ 
 
     color: '#FFF' 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    vAxis: { 
 
     title: 'Value', 
 
     textStyle:{ 
 
     color: '#FFF' 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    legend: { 
 
     textStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    annotations: { 
 
     boxStyle: { 
 
     stroke: '#765e34', 
 
     strokeWidth: 10, 
 
     } 
 
    }, 
 
    backgroundColor: 'transparent', 
 
    colors: ['#876c3c'] 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

编辑

造型注释之前,您必须包含批注列

使用数据视图使用功能“字符串”来添加列系列列

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawBackgroundColor, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBackgroundColor(transparent) { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'X'); 
 
    data.addColumn('number', 'Xaurum Gold Growth'); 
 
    data.addRows([ 
 
    [new Date(2015, 03, 15), 0.000125], 
 
    [new Date(2015, 04, 09), 0.000125202590875], 
 
    [new Date(2015, 04, 12), 0.000126019393875], 
 
    [new Date(2015, 05, 22), 0.000126211199625], 
 
    [new Date(2015, 06, 07), 0.000127017994375], 
 
    [new Date(2015, 06, 08), 0.000127487763], 
 
    [new Date(2015, 06, 09), 0.000128022515125], 
 
    [new Date(2015, 06, 10), 0.00012886722975], 
 
    [new Date(2015, 06, 11), 0.00012921927025], 
 
    ]); 
 

 
    // add annotation column 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: 'stringify', 
 
    sourceColumn: 1, 
 
    type: 'string', 
 
    role: 'annotation' 
 
    }]); 
 

 
    var formatter = new google.visualization.NumberFormat({ 
 
    fractionDigits: 15 
 
    }); 
 
    formatter.format(data, 1); 
 

 
    var options = { 
 
    hAxis: { 
 
     title: 'Time', 
 
     textStyle: { 
 
     color: '#FFF' 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    vAxis: { 
 
     title: 'Value', 
 
     textStyle: { 
 
     color: '#FFF' 
 
     }, 
 
     titleTextStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    legend: { 
 
     textStyle: { 
 
     color: '#fff' 
 
     } 
 
    }, 
 
    annotations: { 
 
     boxStyle: { 
 
     stroke: '#876c3c', 
 
     strokeWidth:3 
 
     }, 
 
     textStyle: { 
 
     color: '#876c3c' 
 
     } 
 
    }, 
 
    backgroundColor: "transparent", 
 
    colors: ['#876c3c'] 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('charta_div')); 
 
    // use data view to draw chart 
 
    chart.draw(view, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="charta_div"></div>

+0

是的,它为我工作!感谢您的帮助! – OrangeBud

+0

是的,我正在尽我最大的风格注释,但正如我所说我很新的Javascript,所以我不明白在哪里把所有的东西,我需要改变背景颜色,字体颜色,边框。提前谢谢你的帮助! – OrangeBud

+0

我认为我没有做正确的事情,我做了希望,因为我应该做的,但我不能看到任何事情发生,这里是jsfiddle的例子。 [link] https://jsfiddle.net/pprh2rot/1/ [/ link] – OrangeBud