57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>D3</title>
|
|
<script src="/ui/assets/d3.js"></script>
|
|
<script src="/ui/assets/echarts.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container"></div>
|
|
<script type="text/javascript">
|
|
// Declare the chart dimensions and margins.
|
|
const width = 640;
|
|
const height = 400;
|
|
const marginTop = 20;
|
|
const marginRight = 20;
|
|
const marginBottom = 30;
|
|
const marginLeft = 40;
|
|
|
|
// Declare the x (horizontal position) scale.
|
|
console.log(window.d3);
|
|
console.log(window.echarts);
|
|
const x = window.d3
|
|
.scaleUtc()
|
|
.domain([new Date("2023-01-01"), new Date("2024-01-01")])
|
|
.range([marginLeft, width - marginRight]);
|
|
|
|
// Declare the y (vertical position) scale.
|
|
const y = window.d3
|
|
.scaleLinear()
|
|
.domain([0, 100])
|
|
.range([height - marginBottom, marginTop]);
|
|
|
|
// Create the SVG container.
|
|
const svg = window.d3
|
|
.create("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
// Add the x-axis.
|
|
svg
|
|
.append("g")
|
|
.attr("transform", `translate(0,${height - marginBottom})`)
|
|
.call(window.d3.axisBottom(x));
|
|
|
|
// Add the y-axis.
|
|
svg
|
|
.append("g")
|
|
.attr("transform", `translate(${marginLeft},0)`)
|
|
.call(window.d3.axisLeft(y));
|
|
|
|
// Append the SVG element.
|
|
$node.children[0].append(svg.node());
|
|
</script>
|
|
</body>
|
|
</html>
|