nvd3.js | 易学教程

How to make nvd3 work in Internet Explorer 8?

阅读更多关于 How to make nvd3 work in Internet Explorer 8?

问题 I am creating a dashboard project for which i am using nvd3 but as we know svg is not supported in IE8 so it does not render graphs/charts in IE8..please suggest how i can make nvd3 work in IE8 回答1: I'm in the same situation and I think I may just ditch nvd3 (besides no ie8 support, I'm finding other bugs). I'm wondering, has anyone successfully used r2d3 with nvd3? My concern is that r2d3 uses d3v3 now, which nvd3 is not presently supporting (currently d3v2... d3v3 support in the works as of

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 name=Generator content="Microsoft Excel 11"><meta http-equiv="Content-Type" content="text/html; charset

Alter first vertical grid line in nvd3

阅读更多关于 Alter first vertical grid line in nvd3

问题 I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem. I tested it by running the line: d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999') in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical

NVD3 linechart tooltips not following the mouse

阅读更多关于 NVD3 linechart tooltips not following the mouse

问题 I'm using the NVD3 library to generate a linechart, and gave some data: The problem is, the interactive guideline shows up like this (specifically note the tooltips): Note that I only get a tooltip at the start and end of the linechart. Now, I set useInteractiveGuideline(false) This DOES show up correctly, but is very laggy and I'd like to use useInteractiveGuideline(true) . Is suspect this is a bug in my code. 回答1: maybe you need to define the .x(function (d) { return xValues.indexOf(d.x); }

Bar Chart With View Finder d3.js

阅读更多关于 Bar Chart With View Finder d3.js

问题 How to provide viewfinder Functionality in d3.js for bar-chart. the chart with view finder is like this http://nvd3.org/ghpages/lineWithFocus.html and the bar chart i want to integrate view finder function is like this http://nvd3.org/ghpages/multiBar.html. can any one help me with this. i am searching for whole week and couldn't get any thing. 回答1: Actually you can, but you have to make it. And its pretty simple! Download the files from nvd3.org Take the file "linePlusBarWithFocusChart.html"

How do I add an “average” line to an nvd3.js Stacked Area Chart?

阅读更多关于 How do I add an “average” line to an nvd3.js Stacked Area Chart?

问题 I've got a working Stacked Area Chart using NVD3.js: working jsfiddle here var volumeData = [{"key":"Hit","values":[[1.3781628E12,12],[1.3782492E12,9],[1.3783356E12,9],[1.378422E12,4],[1.3785084E12,2],[1.3785948E12,3],[1.3786812E12,6],[1.3787676E12,5],[1.378854E12,1],[1.3789404E12,5],[1.3790268E12,1],[1.3791132E12,3],[1.3791996E12,0],[1.379286E12,2],[1.3793724E12,0]]},{"key":"Miss","values":[[1.3781628E12,3],[1.3782492E12,3],[1.3783356E12,1],[1.378422E12,12],[1.3785084E12,4],[1.3785948E12,7],

How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?

阅读更多关于 How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?

问题 I'm trying to add some space/padding for a nvd3 multi bar chart. "groupSpacing" is not what I need, since it only adds space between groups. I'll need space between each bar inside group. I found one link in github support. Can you post any solution or tweak? I also found a d3 example of grouped bar chart. Any help in this example also very helpful to me. Thanks. 回答1: I have draw a d3 group barchart: fiddle You can adjust the groupSpacing by change the code on line 56: var groupSpacing = 6;

Y axis label not displaying large numbers - Multi-Bar Chart

阅读更多关于 Y axis label not displaying large numbers - Multi-Bar Chart

问题 In my Multi-Bar Chart, I need to show larger numbers on the Y axis labels. Currently it's not showing more than seven characters: How can I do it? 回答1: Set chart.margin().left = 120 This will give you plenty of space to display 10,000,000. nv.addGraph(function() { var chart = nv.models.discreteBarChart() .x(function(d) { return d.label }) .y(function(d) { return d.value }) .staggerLabels(true) .tooltips(false) .showValues(true) chart.forceY([10000000]); chart.margin().left = 120 d3.select('

How to sort bar in nvd3?

阅读更多关于 How to sort bar in nvd3?

问题 I am using nvd3 multibar chart in my application. Its working fine. Here i need to sort the bars based on the values(I mean in ascending/descend manner). Is there any inbuilt function available for sorting in nvd3. Or how can I achieve the sorting thing. nv.addGraph(function() { var chart; chart = nv.models.multiBarChart() .margin({bottom: 100}) .transitionDuration(300); chart.options( {delay: 1200}); chart.multibar .hideable(false); chart.xAxis //.axisLabel("Modules") .rotateLabels(45);

how do i format the value shown in a d3 graph

阅读更多关于 how do i format the value shown in a d3 graph

问题 I am trying to change the formatting on the value shown on top of the bar graph in a nvd3 discrete bar graph. I believe I am doing something wrong, I have no idea. Here is the js fiddle for the graph http://jsfiddle.net/looneydoodle/PdpRq/ Here is the code var basicformat = d3.format(',f'); d3graph.selectAll('g.nv-bar text').each(function(d,i){ this.text(basicformat(this.value)); }); EDIT: Figured out how to do it, although it might be a bad way to do it. Here is the updated fiddle: http:/