gpt4 book ai didi

javascript - 页面上有多个 NVD3 图表。如何简化javascript代码和wrap函数?

转载 作者:行者123 更新时间:2023-11-30 08:02:38 25 4
gpt4 key购买 nike

我目前在网站上使用 NVD3 绘制图表,其中一页有 6 个图表。我目前只为六张图分别添加了 6 个函数,但我觉得这不是解决问题的最优雅方式。以下是相关 html/javascript 代码的示例:

<div id="chicago" class='with-3d-shadow with-transitions chart'>
<svg> </svg>
</div>

nv.addGraph(function() {
var chicago = nv.models.lineChart()
.margin({top: 30, right: 60, bottom: 50, left: 80})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());

chicago.transitionDuration(500);

chicago.xAxis.tickFormat(function(d) {

var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
if (dx > 0) {
return d3.time.format('%x')(new Date(dx))
}
return null;
});

chicago.yAxis
.axisLabel('Price ($/Dth)')
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });

nv.log(testdata);
d3.select('#chicago svg')
.datum(testdata)
.call(chicago);

nv.utils.windowResize(chicago.update);

return chicago;
});

我将如何包装该函数以便我可以多次重复使用它而不必重复它并替换每个图形的名称(在本例中为“chicago”)?

最佳答案

这很简单,这是一种方法。

HTML :

<div id='chart1'>
<h3>My Chart 1</h3>
<svg></svg>
</div>
<div id='chart2'>
<h3>My Chart 2</h3>
<svg></svg>
</div>
<div id='chart3'>
<h3>My Chart 3</h3>
<svg></svg>
</div>

JavaScript :

// Call my charts , pass in my div id here
drawChart('chart1');
drawChart('chart2');
drawChart('chart3');

//Donut chart example
function drawChart(div) {
var width = height = 400;

nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) {
return d.label
}).y(function (d) {
return d.value
}).width(width)
.height(height)
.showLabels(true)
.labelThreshold(.05)
.labelType("percent")
.donut(true);

d3.select("#" + div + " svg")
.datum(exampleData())
.attr('width', width).attr('height', height)
.transition().duration(350)
.call(chart);

return chart;
});
}

这是一个working version

关于javascript - 页面上有多个 NVD3 图表。如何简化javascript代码和wrap函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24253172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com