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中文文档 - 笔下光年
网站首页
坐标轴扩展
Axes in Chart.js can be individually extended. Axes should always derive from Chart.Scale but this is not a mandatory requirement. ```javascript class MyScale extends Chart.Scale { /* extensions ... */ } MyScale.id = 'myScale'; MyScale.defaults = defaultConfigObject; // MyScale is now derived from Chart.Scale ``` Once you have created your scale class, you need to register it with the global chart object so that it can be used. ```javascript Chart.register(MyScale); // If the new scale is not extending Chart.Scale, the prototype can not be used to detect what // you are trying to register - so you need to be explicit: // Chart.registry.addScales(MyScale); ``` To use the new scale, simply pass in the string key to the config when creating a chart. ```javascript const lineChart = new Chart(ctx, { data: data, type: 'line', options: { scales: { y: { type: 'myScale' // this is the same id that was set on the scale } } } }); ``` ## Scale Properties Scale instances are given the following properties during the fitting process. ```javascript { left: number, // left edge of the scale bounding box right: number, // right edge of the bounding box top: number, bottom: number, width: number, // the same as right - left height: number, // the same as bottom - top // Margin on each side. Like css, this is outside the bounding box. margins: { left: number, right: number, top: number, bottom: number }, // Amount of padding on the inside of the bounding box (like CSS) paddingLeft: number, paddingRight: number, paddingTop: number, paddingBottom: number } ``` ## Scale Interface To work with Chart.js, custom scale types must implement the following interface. ```javascript { // Determines the data limits. Should set this.min and this.max to be the data max/min determineDataLimits: function() {}, // Generate tick marks. this.chart is the chart instance. The data object can be accessed as this.chart.data // buildTicks() should create a ticks array on the axis instance, if you intend to use any of the implementations from the base class buildTicks: function() {}, // Get the label to show for the given value getLabelForValue: function(value) {}, // Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value // @param index: index into the ticks array getPixelForTick: function(index) {}, // Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value // @param value : the value to get the pixel for // @param [index] : index into the data array of the value getPixelForValue: function(value, index) {}, // Get the value for a given pixel (x coordinate for horizontal axis, y coordinate for vertical axis) // @param pixel : pixel value getValueForPixel: function(pixel) {} } ``` Optionally, the following methods may also be overwritten, but an implementation is already provided by the Chart.Scale base class. ```javascript { // Adds labels to objects in the ticks array. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks); generateTickLabels: function() {}, // Determine how much the labels will rotate by. The default implementation will only rotate labels if the scale is horizontal. calculateLabelRotation: function() {}, // Fits the scale into the canvas. // this.maxWidth and this.maxHeight will tell you the maximum dimensions the scale instance can be. Scales should endeavour to be as efficient as possible with canvas space. // this.margins is the amount of space you have on either side of your scale that you may expand in to. This is used already for calculating the best label rotation // You must set this.minSize to be the size of your scale. It must be an object containing 2 properties: width and height. // You must set this.width to be the width and this.height to be the height of the scale fit: function() {}, // Draws the scale onto the canvas. this.(left|right|top|bottom) will have been populated to tell you the area on the canvas to draw in // @param chartArea : an object containing four properties: left, right, top, bottom. This is the rectangle that lines, bars, etc will be drawn in. It may be used, for example, to draw grid lines. draw: function(chartArea) {} } ``` The Core.Scale base class also has some utility functions that you may find useful. ```javascript { // Returns true if the scale instance is horizontal isHorizontal: function() {}, // Returns the scale tick objects ({label, major}) getTicks: function() {} } ```
上一篇:
Chart.js API
下一篇:
图表扩展