写一段根据json显示折线的html
时间: 2023-02-20 22:51:21 浏览: 44
下面是一个基于 JSON 数据显示折线图的 HTML 代码示例:
```
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="lineChart"></canvas>
</div>
<script>
var jsonData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}]
};
var ctx = document.getElementById("lineChart").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: jsonData,
options: {}
});
</script>
</body>
</html>
```
这段代码使用了 Chart.js 库来绘制折线图,通过 JSON 数据定义了图表的标签、数据等相关属性。最后通过 JavaScript 代码在 canvas 元素中创建并显示图表。