Я нашел отличную подсвечник, сделанный с помощью D3. JS здесь: https://bl.ocks.org/anilnairxyz/raw/a51393d7c51342abe8d4e3f4cbab7ae1/ Модули пакета находятся здесь: https://gist.github.com/anilnairxyz/a51393d7c51342abe8d4e3f4cbab7ae1
Для моих целей я хочу изменить нижнюю диаграмму на линейный график. Поэтому я добавил функцию в основной файл. js под двумя существующими:
function displayCS() {
var chart = cschart().Bheight(460);
d3.select("#chart1").call(chart);
var chart = barchart().mname("volume").margin(320).MValue("TURNOVER");
d3.select("#chart1").datum(genData).call(chart);
var chart = linechart().mname("comshort").margin(400).MValue("LINE");
d3.select("#chart1").datum(genData).call(chart);
Я также добавил csline. js в мои скрипты. До сих пор я только что изменил несколько строк в существующих csbars. js пакета. Это новый csline. js:
function linechart() {
var margin = {top: 400, right: 30, bottom: 10, left: 5 },
width = 1000, height = 60, mname = "mline1";
var MValue = "LINES";
function linerender(selection) {
selection.each(function(data) {
var x = d3.scale.ordinal()
.rangeBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format(TFormat[TIntervals[TPeriod]]));
var yAxis = d3.svg.axis()
.scale(y)
.ticks(Math.floor(height/50));
var svg = d3.select(this).select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data.map(function(d) { return d.TIMESTAMP; }));
y.domain([0, d3.max(data, function(d) { return d[MValue]; })]).nice();
var xtickdelta = Math.ceil(60/(width/data.length))
xAxis.tickValues(x.domain().filter(function(d, i) { return !((i+Math.floor(xtickdelta/2)) % xtickdelta); }));
svg.append("g")
.attr("class", "axis yaxis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis.orient("right").tickFormat("").tickSize(0));
var barwidth = x.rangeBand();
var fillwidth = (Math.floor(barwidth*0.7)/2)*2+1; // Breite der Volumenbars
var bardelta = Math.round((barwidth-fillwidth)/2);
var mbar = svg.selectAll("."+mname+"bar")
.data([data])
.enter().append("g")
.attr("class", mname+"bar");
mbar.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class", mname+"fill")
.attr("x", function(d) { return x(d.TIMESTAMP) + bardelta; })
.attr("y", function(d) { return y(d[MValue]); })
.attr("class", function(d, i) { return mname+i; })
.attr("height", function(d) { return y(0) - y(d[MValue]); })
.attr("width", fillwidth);
});
}
barrender.mname = function(value) {
if (!arguments.length) return mname;
mname = value;
return barrender;
};
barrender.margin = function(value) {
if (!arguments.length) return margin.top;
margin.top = value;
return barrender;
};
barrender.MValue = function(value) {
if (!arguments.length) return MValue;
MValue = value;
return barrender;
};
return linerender;
}
Как мне сделать линейную диаграмму вместо диаграммы? Данные хранятся в csv-файле и должны отображаться в самой нижней части модуля.