javascript 图表框架

Highcharts

Highcharts是使用JavaScript编写的免费图表库。它可以轻松地绘制各种类型的图表，包括线图、柱状图、饼图、散点图等。使用Highcharts，需要先引入库文件，然后创建一个div元素，并指定宽度和高度。最后在脚本中使用Highcharts对象，传递数据和配置选项即可实现图表绘制。

head>
    script src="https://code.highcharts.com/highcharts.js">
    /script>
    /head>
    body>
    div id="container" style="width: 600px;
     height: 400px">
    /div>
    script>
Highcharts.chart('container', {
chart: {
type: 'bar'}
,title: {
text: 'Fruit Consumption'}
,xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']}
,yAxis: {
title: {
text: 'Fruit eaten'}
}
,series: [{
name: 'Jane',data: [1, 0, 4]}
, {
name: 'John',data: [5, 7, 3]}
]}
    );
    /script>
    /body>
    

Chart.js

Chart.js是一个易于使用且功能强大的JavaScript图表库。它支持多种图表类型，包括线图、柱状图、饼图、雷达图等。使用Chart.js需要先引入库文件，在html中创建一个canvas元素并设置宽度和高度。在脚本中使用Chart对象，传递数据和选项即可。

head>
    script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js">
    /script>
    /head>
    body>
    canvas id="myChart" width="400" height="400">
    /canvas>
    script>
    var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],datasets: [{
label: '# of Votes',data: [12, 19, 3, 5, 2, 3],backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1}
]}
,options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true}
}
]}
}
}
    );
    /script>
    /body>
    

D3.js

D3.js是一个数据驱动的JavaScript库，用于创建动态和交互式的数据可视化。它不仅支持各种图表类型，还支持各种形状和图形。D3.js与其他图表库不同的是，它直接操作文档对象模型（DOM），而不是隐藏其文档结构。

head>
    script src="https://d3js.org/d3.v5.min.js">
    /script>
    /head>
    body>
    svg width="400" height="400">
    /svg>
    script>
    const data = [12, 19, 3, 5, 2, 3];
    const svg = d3.select('svg');
    const width = +svg.attr('width');
    const height = +svg.attr('height');
    const xScale = d3.scaleBand().domain(d3.range(data.length)).range([0, width]).padding(0.1);
    const yScale = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);
    const g = svg.append('g').attr('transform', 'translate(' + 30 + ',' + 10 + ')');
    g.selectAll('rect').data(data).enter().append('rect').attr('x', (d, i) =>
    xScale(i)).attr('y', (d) =>
    yScale(d)).attr('width', xScale.bandwidth()).attr('height', (d) =>
    height - yScale(d)).attr('fill', 'steelblue');
    g.selectAll('text').data(data).enter().append('text').text((d) =>
    d).attr('x', (d, i) =>
    xScale(i) + xScale.bandwidth() / 2).attr('y', (d) =>
    yScale(d) - 5).attr('text-anchor', 'middle');
    /script>
    /body>
    

总结

这些图表框架都是强大且灵活的工具，用于创建各种类型的数据可视化。它们提供不同的特点和用法，可以根据需要进行选择。无论使用哪个图表框架，都需要根据自己的需求和数据类型进行调整和优化。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！