javascript - 使用 Javascript/JQuery 绘制折线图，​​按下按钮

Question

使用 Javascript 或 JQuery 创建折线图的最佳和最简单的方法是什么？我尝试了 http://www.chartjs.org/和http://www.oesmith.co.uk/morris.js/lines.html但没有出现。

我需要它在按下按钮时出现。

有什么帮助吗？

Answer 1

有许多提供图表的客户端 API。我个人喜欢使用HighCharts。它非常简单，在某些情况下需要最少的设置并支持各种数据类型作为输入。

您可以在此处找到演示和示例。

你所要做的就是：

1. 包括一个 jQuery 库（可在此处获得）；
2. 包括 HighCharts API 文件（JS 和 CSS），可在此处获得；
3. 为图表创建一个占位符（例如，一个 id 为“myLineChart”的 DIV）；
4. 将数据保存在 JavaScript 对象/数组中（请注意，有几种方法可以向 HighCharts 提供数据，最佳做法是 JSON 对象）；

5. 在页面加载时 ($(document).ready) 或在您选择的另一个事件时调用 HighCharts 方法。以下是一个简短的示例：

   $('#myLineChart').highcharts({
       chart: {
           type: 'line'
       },
       title: {
           text: 'Monthly Average Temperature'
       },    
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },
       yAxis: {
           title: {
               text: 'Temperature (°C)'
           }
       },
       series: [{
           name: 'Tokyo',
           data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
       }, {
           name: 'London',
           data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
       }]
   

   });

在上面的示例中，数据以两个数组的形式提供，每个数组代表一个系列，并将形成一个包含 2 条线的折线图。

请注意，HighCharts API 参考提供了有关其选项的完整文档。

希望能帮助到你。