绘制线条图，按钮按下使用Javascript/JQuery

使用Javascript或JQuery创建线条图的最佳和最简单的方法是什么？我试过http://www.chartjs.org/和http://www.oesmith.co.uk/morris.js/lines.html，但没有出现。绘制线条图，按钮按下使用Javascript/JQuery

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

任何帮助？

来源

2013-10-20 TehSkrunch

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

您可能会感兴趣demos & examples here。

所有你需要做的是：

包括一个jQuery库（here）;
包含HighCharts API文件（JS & CSS），可用here;
为图表创建占位符（例如，ID为“myLineChart”的DIV）;将数据保存在JavaScript对象/数组中（请注意，有几种方法可以将数据提供给HighCharts，最佳实践是JSON对象）;

当页面加载（$（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 Reference提供了有关其选项的完整文档。

希望它有帮助。

来源

2013-10-20 09:13:46 YuvalHerziger

绘制线条图，按钮按下使用Javascript/JQuery

回答

相关问题