nvd3.js | 易学教程

nvd3 line chart not shown properly. (dots and shaded area)

阅读更多关于 nvd3 line chart not shown properly. (dots and shaded area)

问题 So I am using nvd3 and I want to show 2 lines in one line chart. I know the code is alright as I am trying it on the live code of nvd3 and it works fine. I read in many places though that the code they use on the nvd3 live code is not the same as the api. So the graph is shaded and has dots. However in the live code of nvd3 there are no dots and no shaded area. Thus is my code : nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .width(900) .height(600)

How to export Nvd3 charts to jpeg or png format

阅读更多关于 How to export Nvd3 charts to jpeg or png format

问题 Is there any better or easy way to export nvD3 chart to jpeg or png image format? I tried Javascript SVG parser and renderer on Canvas by using http://code.google.com/p/canvg/ But in some cases (may be due to large size or greater resolution) the export option not working. 回答1: In case you want to support all browsers including IE/safari you'll have to implement that server side. I tried a lot but couldn't find a foolproof way to achieve 100% browser compatibility using only js. Canvg and

How to control legend click from external button in NVD3

阅读更多关于 How to control legend click from external button in NVD3

问题 Am trying to fire the event which is triggered while click of a legend item in NVD3 with the help of an external button or checkbox. Is it possible to do it ? And is yes how? 来源： https://stackoverflow.com/questions/23347532/how-to-control-legend-click-from-external-button-in-nvd3

NVD3 TooltipContent Does not work

阅读更多关于 NVD3 TooltipContent Does not work

问题 I am using NVD3 library for my project and i have written following code. var chart = nv.models.lineChart() .useInteractiveGuideline(true) .margin({top: 50, right: 50, bottom: 50, left: 50}) .tooltipContent(function (key, y, e, graph) { console.log("helo"); return "hello"; }); Expected output should be to show hello on mouse over. But i dont get that, instead i get the default tooltip. Please let me know the mistake i am doing. 回答1: It's now possible to have custom content with interactive

Change range for one y axis nvd3/d3

阅读更多关于 Change range for one y axis nvd3/d3

问题 I am currently using the multiChart model and I have two different y Axes. I would like to like to change both of the axes so that they start at 0 because currently they start at the smallest y data point. I have tried doing the following chart.yAxis1 tickFormat(d3.format(',.f')) .domain([0,max_y]); but that doesnt seem to work and .forceY ([0, max_y]) it tells me that there is no forceY function Any ideas? 回答1: You can force min and max values in NVD3 for line or bar charts, try as below:

nvd3 tooltip decimal format

阅读更多关于 nvd3 tooltip decimal format

问题 I'm using nvd3 to display line graph. Having a little trouble in formatting the tooltip content This is the line I'm using to format the y-axis text chart1.yAxis.tickFormat(d3.format('.02f')); But, it is only taking effect on the y-axis. If there is a value like 44.123231, in y-axis, it will show up like 44.12, but in the tooltip, it is showing 44.00. What could be the issue? Is there a way in nvd3 to format tooltip text? 回答1: You can use chart.tooltip.valueFormatter() to specify a formatting

Javascript - export image into excel

阅读更多关于 Javascript - export image into excel

问题 Using this function, I can export image into excel(XLS). This code require physical location of the image. But instead of physical path, I want to pass dataUri of the image. e.g. data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA... Is it possible? function exportExcel() { var template = { excel: '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta name=ProgId content=Excel.Sheet> <meta

nvd3 formatting date returns always 1970-01-01

阅读更多关于 nvd3 formatting date returns always 1970-01-01

问题 I'm trying to build a line chart using nvd3 for d3js but I've got some problems using a date domain on the x axis. Here's my code: data_lineChart = [ { "key" : "key1", "values" : [ { "x" : "2014-04-20", "y" : -6 }, { "x" : "2014-04-13", "y" : -5 }, { "x" : "2014-04-06", "y" : -1 }, ] }, { "key" : "key2", "values" : [ { "x" : "2014-04-20", "y" : 6 }, { "x" : "2014-04-13", "y" : 5 }, { "x" : "2014-04-06", "y" : 1 }, ] } ] nv.addGraph(function() { var chart = nv.models.lineChart(); chart.xAxis

How to correctly centre text element on all bars of a nvd3 bar chart

阅读更多关于 How to correctly centre text element on all bars of a nvd3 bar chart

问题 I want to display the y-axis values of a nvd3 barchart on each individual bar. I can display the values, but I do not know how to set the height of the text element to be at the centre of each bar without hard coding the value. I use d3.selectAll(".nv-bar") to select each bar,but this does not have an height attribute ( as far as I can see). "discreteBar" has a height, but I cannot get in an d3.select() I appreciate any help <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <script src=

NVD3 Set Expanded as default

阅读更多关于 NVD3 Set Expanded as default

问题 In NVD3 you can have charts such as the one at : http://nvd3.org/ghpages/stackedArea.html The default view when you open it up is 'Stacked'. Is it possible to have the default view set as 'Expanded'? 回答1: If you are using the latest version of NVD3 try using chart.style('expand'); to set Expanded as you default view. Here is the full list of options available - 'stack', 'stream', 'stream-center', 'expand', 'stack_percent' Source for the list. I have only tested 'expand' for now, so I am