Chart.js
入门指南
入门
安装
集成
分步指南
概览
可访问性(Accessibility)
颜色(Colors)
数据结构(Data structures)
字体(Fonts)
选项(Options)
内边距(Padding)
性能(Performance)
图表配置
配置(Configuration)
动画(Animations)
画布背景(Canvas background)
数据抽取(Data Decimation)
设备像素比率(Device Pixel Ratio)
通用配置(Elements)
互动(Interactions)
布局(Layout)
图例(Legend)
本地化(Locale)
响应式图表(Responsive Charts)
副标题(Subtitle)
标题(Title)
提示(Tooltip)
Charts
面积图(Area Chart)
柱状/条形图(Bar Chart)
气泡图(Bubble Chart)
环形&饼图(Doughnut and Pie Charts)
折线图(Line Chart)
混合图表(Mixed Chart Types)
极地图(Polar Area Chart)
雷达图(Radar Chart)
离散图(Scatter Chart)
坐标轴
轴(Axes)
笛卡尔坐标(Cartesian)
笛卡尔坐标轴(Cartesian Axes)
分类轴(Category Axis)
线性轴(Linear Axis)
对数轴(Logarithmic Axis)
时间笛卡尔轴(Time Cartesian Axis)
时间序列轴(Time Series Axis)
径向(Radial)
径向轴(Radial Axes)
线性径向轴(Linear Radial Axis)
标签轴(Labelling Axes)
样式(Styling)
开发者
开发者(Developers)
Chart.js API
坐标轴扩展
图表扩展
贡献
插件
发布扩展
更新 Charts
迁移
4.x迁移指南
3.x迁移指南
示例
Chart.js Samples
Bar Charts
Bar Chart Border Radius
Floating Bars
Horizontal Bar Chart
Stacked Bar Chart
Stacked Bar Chart with Groups
Vertical Bar Chart
Line Charts
Interpolation Modes
Line Chart
Multi Axis Line Chart
Point Styling
Line Segment Styling
Stepped Line Charts
Line Styling
Other charts
Bubble
Combo bar/line
Doughnut
Multi Series Pie
Pie
Polar area
Polar area centered point labels
Radar
Radar skip points
Scatter
Scatter - Multi axis
Stacked bar/line
Area charts
Line Chart Boundaries
Line Chart Datasets
Line Chart drawTime
Line Chart Stacked
Radar Chart Stacked
Scales
Linear Scale - Min-Max
Linear Scale - Suggested Min-Max
Linear Scale - Step Size
Log Scale
Stacked Linear / Category
Time Scale
Time Scale - Max Span
Time Scale - Combo Chart
Scale Options
Center Positioning
Grid Configuration
Tick Configuration
Title Configuration
Legend
Events
HTML Legend
Point Style
Position
Alignment and Title Position
Title
Alignment
Subtitle
Basic
Tooltip
Custom Tooltip Content
External HTML Tooltip
Interaction Modes
Point Style
Position
Scriptable Options
Bar Chart
Bubble Chart
Line Chart
Pie Chart
Polar Area Chart
Radar Chart
Animations
Delay
Drop
Loop
Progressive Line
Progressive Line With Easing
Advanced
Data Decimation
Derived Axis Type
Derived Chart Type
Linear Gradient
Programmatic Event Triggers
Animation Progress Bar
Radial Gradient
Plugins
Chart Area Border
Doughnut Empty State
Quadrants
Utils
贡献 - Chart.js中文文档 - 笔下光年
网站首页
贡献
New contributions to the library are welcome, but we ask that you please follow these guidelines: - Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by filing an issue or asking about it in the Chart.js Slack #dev channel. This will save you development time by getting feedback upfront and make reviews faster by giving the maintainers more context and details. - Consider whether your changes are useful for all users, or if creating a Chart.js plugin would be more appropriate. - Check that your code will pass tests and eslint code standards. pnpm test will run both the linter and tests for you. - Add unit tests and document new functionality (in the test/ and docs/ directories respectively). - Avoid breaking changes unless there is an upcoming major release, which is infrequent. We encourage people to write plugins for most new advanced features, and care a lot about backward compatibility. - We strongly prefer new methods to be added as private whenever possible. A method can be made private either by making a top-level function outside of a class or by prefixing it with _ and adding @private JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backward compatibility. Private APIs allow the flexibility to address unforeseen cases. ## Joining the project Active committers and contributors are invited to introduce themselves and request commit access to this project. We have a very active Slack community that you can join here . If you think you can help, we'd love to have you! ## Building and Testing Firstly, we need to ensure development dependencies are installed. With node and pnpm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following: ```shell > pnpm install ``` This will install the local development dependencies for Chart.js. The following commands are now available from the repository root: ```shell > pnpm run build // build dist files in ./dist > pnpm run autobuild // build and watch for source changes > pnpm run dev // run tests and watch for source and test changes > pnpm run lint // perform code linting (ESLint, tsc) > pnpm test // perform code linting and run unit tests with coverage ``` pnpm run dev and pnpm test can be appended with a string that is used to match the spec filenames. For example: pnpm run dev plugins will start karma in watch mode for test/specs/**/*plugin*.js. ### Documentation We use Vuepress to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using these commands: ```shell > pnpm run docs:dev ``` ### Image-Based Tests Some display-related functionality is difficult to test via typical Jasmine units. For this reason, we introduced image-based tests ([#3988](https://github.com/chartjs/Chart.js/pull/3988 "#3988") and [#5777](https://github.com/chartjs/Chart.js/pull/5777 "#5777") ) to assert that a chart is drawn pixel-for-pixel matching an expected image. Generated charts in image-based tests should be as minimal as possible and focus only on the tested feature to prevent failure if another feature breaks (e.g. disable the title and legend when testing scales). You can create a new image-based test by following the steps below: - Create a JS file (example ) or JSON file (example ) that defines chart config and generation options. - Add this file in `test/fixtures/{spec.name}/{feature-name}.json`. - Add a describe line to the beginning of `test/specs/{spec.name}.tests.js` if it doesn't exist yet. - Run pnpm run dev. - Click the "Debug" button (top/right): a test should fail with the associated canvas visible. - Right click on the chart and "Save image as..." `test/fixtures/{spec.name}/{feature-name}.png` making sure not to activate the tooltip or any hover functionality - Refresh the browser page (CTRL+R): test should now pass - Verify test relevancy by changing the feature values slightly in the JSON file. Tests should pass in both browsers. In general, we've hidden all text in image tests since it's quite difficult to get them to pass between different browsers. As a result, it is recommended to hide all scales in image-based tests. It is also recommended to disable animations. If tests still do not pass, adjust tolerance and/or threshold at the beginning of the JSON file keeping them as low as possible. When a test fails, the expected and actual images are shown. If you'd like to see the images even when the tests pass, set "debug": true in the JSON file. ## Bugs and Issues Please report these on the GitHub page - at [github.com/chartjs/Chart.js](https://github.com/chartjs/Chart.js/pull/3988 "github.com/chartjs/Chart.js"). Please do not use issues for support requests. For help using Chart.js, please take a look at the [chart.js](https://stackoverflow.com/questions/tagged/chart.js "chart.js") tag on Stack Overflow. Well structured, detailed bug reports are hugely valuable for the project. Guidelines for reporting bugs: - Check the issue search to see if it has already been reported - Isolate the problem to a simple test case - Please include a demonstration of the bug on a website such as [JS Bin](https://jsbin.com/ "JS Bin") , [JS Fiddle](https://jsfiddle.net/ "JS Fiddle") , or [Codepen](https://codepen.io/pen/ "Codepen") . ([Template](https://codepen.io/pen?template=wvezeOq "Template") ). If filing a bug against master, you may reference the latest code via [https://www.chartjs.org/dist/master/chart.umd.js](https://www.chartjs.org/dist/master/chart.umd.js "https://www.chartjs.org/dist/master/chart.umd.js") (changing the filename to point at the file you need as appropriate). Do not rely on these files for production purposes as they may be removed at any time. Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.
上一篇:
图表扩展
下一篇:
插件