Add x and yAxis label
This commit is contained in:
parent
b778460312
commit
8cb1818612
4 changed files with 137 additions and 17 deletions
|
|
@ -27,7 +27,8 @@ This project is licensied under the Chocolate-Ware license - see the
|
|||
## Changelog
|
||||
|
||||
*v 0.1.3*
|
||||
- Add text support (title only)
|
||||
- Add text support
|
||||
- Add x and y-Axis with label
|
||||
|
||||
*v 0.1.2*
|
||||
- Add documentation
|
||||
|
|
|
|||
3
coc-nvim.lua
Normal file
3
coc-nvim.lua
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
return {
|
||||
'neoclide/coc.nvim',
|
||||
}
|
||||
144
lichartee.js
144
lichartee.js
|
|
@ -192,6 +192,7 @@ class Axes
|
|||
this.width = width;
|
||||
this.height = height;
|
||||
this.title = new Title( title );
|
||||
this.axis = new Axis();
|
||||
this.lines = [];
|
||||
}
|
||||
|
||||
|
|
@ -211,11 +212,10 @@ class Axes
|
|||
* a color, and style is "solid", "dotted",
|
||||
* "dashdot" or "dashed". Default value is
|
||||
* color = "black" and style = "solid"
|
||||
* @param String label Label that will be displayed in the legend
|
||||
*/
|
||||
plot(x, y, linestyle = {color: "black", style: "solid"}, label = '')
|
||||
plot(x, y, linestyle = {color: "black", style: "solid"})
|
||||
{
|
||||
let line = new Line(x, y, linestyle, label);
|
||||
let line = new Line(x, y, linestyle);
|
||||
this.lines.push(line);
|
||||
}
|
||||
|
||||
|
|
@ -263,15 +263,20 @@ class Axes
|
|||
)
|
||||
)
|
||||
);
|
||||
let plot_window = this.title.draw(
|
||||
let n_window = this.title.draw(
|
||||
ctx ,
|
||||
window,
|
||||
);
|
||||
n_window = this.axis.draw(
|
||||
ctx ,
|
||||
n_window,
|
||||
[ [x_min, y_min], [x_max, y_max] ],
|
||||
);
|
||||
for (const index_line in this.lines)
|
||||
{
|
||||
this.lines[index_line].draw(
|
||||
ctx ,
|
||||
plot_window,
|
||||
n_window,
|
||||
[
|
||||
[x_min, y_min],
|
||||
[x_max, y_max],
|
||||
|
|
@ -282,9 +287,9 @@ class Axes
|
|||
ctx.strokeStyle = 'black';
|
||||
ctx.setLineDash([]);
|
||||
ctx.strokeRect(
|
||||
plot_window[0][0], plot_window[0][1],
|
||||
plot_window[1][0] - plot_window[0][0],
|
||||
plot_window[1][1] - plot_window[0][1],
|
||||
n_window[0][0], n_window[0][1],
|
||||
n_window[1][0] - n_window[0][0],
|
||||
n_window[1][1] - n_window[0][1],
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -323,7 +328,6 @@ class Axes
|
|||
* a color, and style is "solid", "dotted",
|
||||
* "dashdot" or "dashed". Default value is
|
||||
* color = "black" and style = "solid"
|
||||
* @property String label Label that will be displayed in the legend
|
||||
*/
|
||||
class Line
|
||||
{
|
||||
|
|
@ -341,19 +345,16 @@ class Line
|
|||
* a color, and style is "solid", "dotted",
|
||||
* "dashdot" or "dashed". Default value is
|
||||
* color = "black" and style = "solid"
|
||||
* @param String label Label that will be displayed in the legend
|
||||
*/
|
||||
constructor(
|
||||
x ,
|
||||
y ,
|
||||
linestyle = {color: "black", style: "solid"},
|
||||
label = ''
|
||||
)
|
||||
{
|
||||
this.x = x ;
|
||||
this.y = y ;
|
||||
this.linestyle = linestyle ;
|
||||
this.label = label ;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -372,7 +373,7 @@ class Line
|
|||
const box_height = box[1][1] - box[0][1];
|
||||
|
||||
let x_coordinates = this.x.map(
|
||||
function (element, index, array)
|
||||
function (element)
|
||||
{
|
||||
return box[0][0] + box_width * (
|
||||
element - view[0][0]
|
||||
|
|
@ -380,7 +381,7 @@ class Line
|
|||
}
|
||||
);
|
||||
let y_coordinates = this.y.map(
|
||||
function (element, index, array)
|
||||
function (element)
|
||||
{
|
||||
return box[0][1] + box_height - ( // starting top left
|
||||
box_height * (
|
||||
|
|
@ -531,6 +532,121 @@ class Title
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Axis (x and y) of the axes (not separated xaxis and yaxis)
|
||||
*
|
||||
* @property number_x_tick int Number of x axis tick
|
||||
* @property number_y_tick int Number of y axis tick
|
||||
* @property int size_tick Size of the tick
|
||||
* @property int margin Size of the margin
|
||||
*/
|
||||
class Axis
|
||||
{
|
||||
/**
|
||||
* @param number_x_tick int Number of x axis tick
|
||||
* @param number_y_tick int Number of y axis tick
|
||||
* @param size_tick int Size of the tick
|
||||
* @param margin int Size of the margin
|
||||
* @param text_height int Height of the text label
|
||||
*/
|
||||
constructor(
|
||||
number_x_tick = 4,
|
||||
number_y_tick = 4,
|
||||
size_tick = 5,
|
||||
margin = 15,
|
||||
text_height = 15,
|
||||
)
|
||||
{
|
||||
this.number_x_tick = number_x_tick;
|
||||
this.number_y_tick = number_y_tick;
|
||||
this.size_tick = size_tick;
|
||||
this.margin = margin;
|
||||
this.text_height = text_height;
|
||||
}
|
||||
|
||||
/**
|
||||
* draw xaxis and yaxis to canvas
|
||||
*
|
||||
* @param ctx CanvasRenderingContext2D Context of canvas
|
||||
* @param window 2darray<Number> Window where to draw the canvas
|
||||
* @param view 2darray<Number> Window where to draw the canvas with
|
||||
* the real value
|
||||
*/
|
||||
draw(ctx, window, view)
|
||||
{
|
||||
let index = 0;
|
||||
let start_pos = window[0][1];
|
||||
let padding = (
|
||||
window[1][1] - window[0][1] - this.margin - this.text_height - this.size_tick
|
||||
) / this.number_y_tick;
|
||||
let step = (view[1][1] - view[0][1]) / this.number_y_tick;
|
||||
let width = 2 * this.text_height;
|
||||
while (index <= this.number_y_tick)
|
||||
{
|
||||
let current_y = start_pos + index * padding;
|
||||
let text = (
|
||||
view[1][1] - index * step
|
||||
).toString().slice(0,3);
|
||||
let text_position = current_y + this.text_height / 2
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
window[0][0] + this.margin + width,
|
||||
current_y,
|
||||
);
|
||||
ctx.lineTo(
|
||||
window[0][0] + this.margin + this.size_tick + width,
|
||||
current_y,
|
||||
);
|
||||
ctx.stroke();
|
||||
ctx.fillText(
|
||||
text,
|
||||
window[0][0] + this.margin,
|
||||
text_position,
|
||||
);
|
||||
current_y += padding;
|
||||
index += 1;
|
||||
}
|
||||
index = 0;
|
||||
start_pos = window[0][0] + this.margin + this.size_tick
|
||||
+ width;
|
||||
padding = (
|
||||
window[1][0] - this.margin - start_pos
|
||||
) / this.number_x_tick;
|
||||
step = (view[1][0] - view[0][0]) / this.number_x_tick;
|
||||
while (index <= this.number_x_tick)
|
||||
{
|
||||
let current_x = start_pos + padding * index;
|
||||
let text = (
|
||||
view[0][0] + index * step
|
||||
).toString().slice(0,3);
|
||||
let text_width = ctx.measureText(text).width;
|
||||
let text_position = current_x - text_width / 2;
|
||||
ctx.strokeStyle = 'black';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
current_x,
|
||||
window[1][1] - this.margin - this.text_height,
|
||||
);
|
||||
ctx.lineTo(
|
||||
current_x,
|
||||
window[1][1] - this.margin - this.size_tick - this.text_height,
|
||||
);
|
||||
ctx.stroke();
|
||||
ctx.fillText(
|
||||
text ,
|
||||
text_position,
|
||||
window[1][1] - this.margin,
|
||||
);
|
||||
index += 1;
|
||||
}
|
||||
return [
|
||||
[window[0][0] + this.margin + this.size_tick + width, window[0][1]],
|
||||
[window[1][0] - this.margin , window[1][1] - this.text_height - this.margin - this.size_tick],
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* get max or min of a 1d array of number
|
||||
*
|
||||
|
|
|
|||
4
test.js
4
test.js
|
|
@ -16,8 +16,8 @@ manager.list_canvas[0].figure.list_axes[0].plot(
|
|||
[0,2,4,6,8,10]
|
||||
);
|
||||
manager.list_canvas[0].figure.add_axes().plot(
|
||||
[0,1,2,3,4,5],
|
||||
[1,1/2,1/3,1/4,1/5],
|
||||
[2,4,6,8,10],
|
||||
[1/2,1/4,1/6,1/8,1/10],
|
||||
{
|
||||
color: 'rgb(0,255,0)',
|
||||
style: 'dashdot'
|
||||
|
|
|
|||
Loading…
Reference in a new issue