wxChart address https://github.com/xiaolin3303/wx-charts/issues/56
with graphic link https://www.kancloud.cn/xchhhh/wx-chart/399336
After testing wxchart has no bar chart, it is recommended to use uCharts
var wxCharts = require('../../utils/wxcharts');
var app = getApp();
var lineChart = null;
Page({
createSimulationData: function () {
var categories = [];
var data = [];
for (var i = 0; i < 30; i++) {
categories.push((i + 1));
data.push(Math.random()*(20-10)+10);
}
return {
categories: categories,
data: data
}
},
onLoad: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
var simulationData = this.createSimulationData();
lineChart = new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: simulationData.categories,
animation: false,
series: [{
name: '成交量1',
data: simulationData.data,
format: function (val, name) {
return val.toFixed(2) + '万';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 300,
dataLabel: true,
dataPointShape: true,
enableScroll: true,
extra: {
lineStyle: 'curve'
}
})
Parameter Description
opts Object
opts.canvasId String required WeChat applet canvas-id
opts.width Number required canvas width, the unit is px
opts.height Number required canvas height, the unit is px
opts.background String canvas background color (if the page background color is not white, please set it to the page background color, default #ffffff)
opts.enableScroll Boolean Whether to enable dragging and scrolling of charts. Default false. Supports line and area chart types (need to bind scrollStart, scroll, scrollEnd methods)
opts.title Object (only for ring chart)
opts.title.name String title content
opts.title.fontSize Number Title font size (optional, unit is px)
opts.title.color String title color (optional)
opts.title.offsetX Number Title horizontal position offset, unit px, default 0
opts.subtitle Object (only for ring chart)
opts.subtitle.name String subtitle content
opts.subtitle.offsetX Number Subtitle horizontal position offset, unit px, default 0
opts.subtitle.fontSize Number Subtitle font size (optional, unit is px)
opts.subtitle.color String subtitle color (optional)
opts.animation Boolean default true Whether to display animation
opts.legend Boolen default true Whether to display the logos of each category below the chart
opts.type String required chart type, optional values are pie, line, column, area, ring, radar
opts.categories Array required (not needed for pie charts and donut charts) Data category classification
opts.dataLabel Boolean default true Whether to display the data content value in the chart
opts.dataPointShape Boolean default true Whether to display the data point graphic identifier in the chart
opts.disablePieStroke Boolean default false Do not draw white dividing lines for each block of the pie chart (donut chart)
opts.xAxis Object X axis configuration
opts.xAxis.gridColor String For example #7cb5ec default #cccccc X axis grid color
opts.xAxis.fontColor String For example #7cb5ec default #666666 X-axis data point color
opts.xAxis.disableGrid Boolean default false Do not draw X-axis grid
opts.xAxis.type String optional value calibration (scale) defaults to include style
opts.yAxis Object Y axis configuration
opts.yAxis.format Function Customize Y-axis text display
opts.yAxis.min Number Y-axis starting value
opts.yAxis.max Number Y-axis stop value
opts.yAxis.title String Y轴title
opts.yAxis.gridColor String For example #7cb5ec default #cccccc Y-axis grid color
opts.yAxis.fontColor String For example #7cb5ec default #666666 Y axis data point color
opts.yAxis.titleFontColor String For example #7cb5ec default #333333 Y axis title color
opts.yAxis.disabled Boolean default false Do not draw the Y axis
opts.extra Object Other non-generic configuration items
opts.extra.ringWidth Number ringChart ring width, the unit is px
opts.extra.lineStyle String (only valid for line, area charts) Optional values: curve curve, straight line (default)
opts.extra.column Object histogram related configuration
opts.extra.column.width Number The graphic width of each item of the histogram, the unit is px
opts.extra.legendTextColor String For example #7cb5ec default #cccccc legend text color
opts.extra.radar Object radar chart related configuration
opts.extra.radar.max Number, the default is the maximum value of series data, the maximum value of the data interval, used to adjust the scale of data display
opts.extra.radar.labelColor String, the default is #666666, the color of each logo copy
opts.extra.radar.gridColor String, default is #cccccc, radar grid color
opts.extra.pie Object pie chart, donut chart related configuration
opts.extra.pie.offsetAngle Number, the default is 0, the starting angle is offset in degrees, clockwise, the starting point is at 3 o'clock (for example, if you want to set the starting point at 12 o'clock, that is, offset 90 degrees counterclockwise, pass Enter -90)
opts.series Array required data list
Each structure definition of the data list
dataItem Object
dataItem.data Array required (Number for pie charts and donut charts) data, if null is passed in, a breakpoint will appear in the chart
dataItem.color String For example #7cb5ec If not passed in, the system default color scheme will be used
dataItem.name String data name
dateItem.format Function Customize display data content
updateData(data) Update chart data, data: object, data.categories (optional, see parameter description for details), data.series (optional, see parameter description for details), data.title (optional, see parameter description for details) , data.subtitle (optional, see parameter description for details)
stopAnimation() Stops the animation effect currently in progress and directly displays the final result of the rendering
addEventListener(type, listener) Add event listener, type: String event type, listener: function processing method
getCurrentDataIndex(e) Get the data sequence number when clicking in the chart (-1 means that the corresponding data area is not found), e: Object WeChat applet standard event, you need to manually bind the touch event, for details, refer to wx- charts- Example of column diagram in demo
showToolTip(e, options?) Display the detailed content of the data in the chart (currently only supports line and area chart types), e: Object WeChat applet standard event, options: Object optional, custom configuration of tooltip, support option.background, The default is #000000; option.format, function type, accepts two incoming parameters, seriesItem (Object, including seriesItem.name and seriesItem.data) and category, which can customize the display content of tooltip. For details, please refer to the line chart example in wx-charts-demo
scrollStart(e), scroll(e), scrollEnd(e) settings support chart drag and drop series events (support line, area, column), for details, refer to the ScrollLine diagram example in wx-charts-demo
Event
renderComplete The chart rendering is completed (if there is an animation effect, it will be triggered when the animation effect is completed).
How to use the event
let chart = new wxCharts(…);
chart.addEventListener('renderComplete', () => { // your code here }) ;
Page({
data: {
},
touchHandler: function (e) {
lineChart.scrollStart(e);
},
moveHandler: function (e) {
lineChart.scroll(e);
},
touchEndHandler: function (e) {
lineChart.scrollEnd(e);
lineChart.showToolTip(e, {
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},