MeteorCharts

Website: www.meteorcharts.com

Next Generation Charting Framework

MeteorCharts is the next generation charting framework for the web. It uses an abstract layer for data binding, and therefore supports any rendering technology of your choice, including HTML5 Canvas, WebGL, SVG, VML, and Dom. MeteorCharts excels in places where other charting libraries fall short, most notably with performance, extensibility, and mobile support

  • Performance - Performance is our biggest priority. Need to render over a million data points per second? No problem.
  • Extensibility - Most other charting libraries out there generate charts with giant configurations that require users to define how certain components look, where they are placed, what colors they are, etc. Nice in theory, but this absolutely does not scale. In order for this type of approach to work in real life, the developers of those libraries will have to know in advance all of the possible combinations of components and interactivity for all charts in the universe, in order to make them configurable. Not going to happen. MeteorCharts decouples components, layouts, and themes so that it's easy to create any kind of chart that you can imagine. It's like having a giant bucket of charting components that you stick together, and it just works.
  • Mobile - MeteorCharts was developed with mobile and tablet experiences as 1st class citizens. Drop a chart in your website, and it will work great on desktop browsers, mobile devices, and tablets.

Quick Start

The fastest way to get a chart up and running is to use a pre-built theme and layout. Themes define colors and font sizes in your chart. Layouts define position, size, and bindings of components inside your chart.

var chart = new MeteorChart({
  container: 'container',
  width: 500,
  height: 290,
  theme: MeteorChart.Themes.CoteAzur,
  layout: MeteorChart.Layouts.SparkChart,
  components: {
    lineSeries: {
      data: [
        {
          // red
          title: 'Series 1',
          points: [
            -100, -100,
            100, 100,
            200, 50
          ]
        },
        { 
          // green
          title: 'Series 2',
          points: [
            0, 100,
            100, 200,
            200, 150,
            300, 200
          ]
        }
      ]
    }
  }
});

Terminology

  • Component - a component is a graphical element inside of a chart. Some examples of pre-built components include Title, Line, Axis, Tooltip, Scatter, etc. It's also really easy to create your own components
  • Layout - layouts define the position, size, and data source of components in the chart through data binding. Some examples of pre-built layouts include StandardLineChart, StandardLineChartWithTitle, SparkChart, and InteractiveLineChart. It's also really easy to create your own layouts.
  • Theme - themes define the color palette and fonts used in your chart. Some exmaples of pre-built themes include CoteAzure and Lollapallooza. It's easy to create your own themes as well.
  • Data - most components require data to render. For example, if you're creating a standard line chart, the data for the line component is a series of data points. The data for the x and y axis is bound to the line component data. And the data for the title component is just a string, like "This is my chart title".
  • Style - Style attributes can be used to specify the look of feel of individual components.
  • Formatter - formatters are used to format data into human readable strings. For example, if you're creating a line chart with dates along the x-axis, you'll want to use the Date formatter to convert the unix timestamps into human readable dates. Formatters can also be used with other components, such as tooltips.

Building the Project

In the root directory, run npm install. Once that finishes, you can run grunt dev to build the development version.

Full Examples

Once you've built the MeteorCharts framework, you can start the node server by going to the root directory and running node server.js. Once the server has started, you can open up your favorite browsers and go to localhost:1337/examples/index.html to see a list of all the examples



MeteorCharts

网站: www.meteorcharts.com

下一代图表框架

MeteorCharts是网络的下一代图表框架。它使用抽象层进行数据绑定,因此支持您所选择的任何渲染技术,包括HTML5 Canvas,WebGL,SVG,VML和Dom。 MeteorCharts在其他图表库缺少的地方擅长,最显着的是性能,可扩展性和移动支持。

  • 性能 - 性能是我们的首要任务。需要每秒渲染超过一百万个数据点吗?没问题。
  • 可扩展性 - 大多数其他图表库都会生成具有巨大配置的图表,需要用户定义某些组件的外观,放置位置,颜色等。理论上很好,但是这绝对不会扩大。为了使这种方法在现实生活中工作,这些库的开发人员必须事先知道宇宙中所有图表的组件和交互性的所有可能的组合,以使其可配置。不会发生。 MeteorCharts将组件,布局和主题分离,以便创建任何可以想象的图表。它就像有一大堆图表组件,你粘在一起,它只是工作。
  • 手机 - MeteorCharts以移动和平板电脑的经验开发为一流公民。在您的网站上放置一个图表,它将在桌面浏览器,移动设备和平板电脑上运行良好。

快速入门

获取图表并运行的最快方法是使用预制的主题和布局。主题在图表中定义颜色和字体大小。布局定义图表中组件的位置,大小和绑定。

var chart = new MeteorChart({
  container: 'container',
  width: 500,
  height: 290,
  theme: MeteorChart.Themes.CoteAzur,
  layout: MeteorChart.Layouts.SparkChart,
  components: {
    lineSeries: {
      data: [
        {
          // red
          title: 'Series 1',
          points: [
            -100, -100,
            100, 100,
            200, 50
          ]
        },
        {
          // green
          title: 'Series 2',
          points: [
            0, 100,
            100, 200,
            200, 150,
            300, 200
          ]
        }
      ]
    }
  }
});

术语

  • 组件 - 组件是图表内的图形元素。一些预构建组件的示例包括标题,线,轴,工具提示,散点等。创建自己的组件也很容易。
  • 布局 - 布局通过数据绑定定义图表中组件的位置,大小和数据源。预制布局的一些示例包括StandardLineChart,StandardLineChartWithTitle,SparkChart和InteractiveLineChart。创建自己的布局也很容易。
  • 主题 - 主题定义图表中使用的调色板和字体。一些预制主题的例子包括CoteAzure和Lollapallooza。也很容易创建自己的主题。
  • 数据 - 大多数组件需要数据进行渲染。例如,如果要创建标准折线图,则线组件的数据是一系列数据点。 x轴和y轴的数据被绑定到线分量数据。标题组件的数据只是一个字符串,如这是我的图表标题。
  • 样式 - 样式属性可用于指定单个组件的感觉外观。
  • 格式化程序用于将数据格式化为人类可读的字符串。例如,如果要创建一个沿x轴的日期的折线图,您将需要使用Date格式化程序将unix时间戳转换为人类可读取的日期。格式化器也可以与其他组件一起使用,如工具提示。

构建项目

在根目录下,运行 npm install 。一旦完成,您可以运行 grunt dev 来构建开发版本。

完整示例

一旦构建了MeteorCharts框架,您可以通过转到根目录并运行 node server.js 启动节点服务器。一旦服务器启动,您可以打开您最喜爱的浏览器,然后转到 localhost:1337 / examples / index.html ,查看所有示例的列表




相关问题推荐