chartjs插件zoom不适用于离线环境javascript.js

Question

我在离线环境中工作，使用从纱线镜像导入的chartjs：图表.js 2.7.2chartjs插件缩放0.6.6hammerjs 2.0.8力矩2.23.0

我确实将它们导入到我的.js文件中，作为导入"chartjs-plugin-zoom"、导入"hammerjs"，导入"moment"，从"Chart.js"导入｛Chart｝。

我还捆绑了我所有的文件，我可以在捆绑包中看到依赖项。

在我的项目的节点模块中，缩放的示例和resetZoom();都在工作，但当我在项目中运行它们时，我会得到错误：

我无法用鼠标滚动来放大图表。

我有一个菜单选项设置：

options:{
zoom:{
enabled:true,
mode:'y'
},
pan:{
enabled:true,
mode:'y'
}
}

我认为这是有效的，所以理论上它应该有效，对吗？？怎么了？？

我还尝试手动添加：

options:{
zoom:{
enabled:true,
mode:'y'
},
pan:{
enabled:true,
mode:'y'
}
}

当我添加了一个图表，但仍然没有。。。

import "moment"
import { Chart } from "chart.js"
import "hammerjs"
import "chartjs-plugin-annotation"
import "chartjs-plugin-zoom"

/// The main component of web-plots. The plot ties together sever chart
/// objects from the chart.js module.
export const Plot = class {
constructor(props) {
// initialize props
this.props = props
//global to keep track of rawlrv attributes from manager.js
this.globlrv = null
this.desirable= null
// Initialize state variables
this.charts = [] // maps ids to a chart
this.root = document.createElement('ray-plot') // parent node of plot
// constructs charts and applies properties
const { plotData } = props
plotData.forEach(chartData => this.addChart(chartData))
props.plotData = this.charts.map(chart => {
return {
type: chart.type,
data: chart.data,
options: chart.options,
}
})
props.backgroundColor.map((color, index) => this.changeBackgroundColor(index, color))
this.title = props.plotTitle
}
set title(title) {
this.charts[0].options.title.display = title? true: false
this.charts[0].options.title.text = title
}

get title() {
return this.charts[0].options.title.text
}
getProps(){
return this.props
}
changeZoomPanEnabled(chartId, enabled){
const chart = this.charts[chartId]
chart.options.zoom.enabled = enabled
chart.options.pan.enabled = enabled
}
changeZoom(chartId, mode){
this.charts[chartId].options.zoom.mode = mode
this.charts[chartId].options.pan.mode = mode
}
changeBackgroundColor(chartId, color){
this.charts[chartId]
.chart
.canvas
.parentNode
.style
.backgroundColor = color
}
changeGridLineColor(chartId, color){
const scales = this.charts[chartId].scales
Object.keys(scales)
.map(key => scales[key])
.forEach(axis => {
axis.options.gridLines.color = color
axis.originalOptions.gridLines.color = color
})
}
changeGridLineDisplay(chartId, display){
const scales = this.charts[chartId].scales
Object.keys(scales)
.map(key => scales[key])
.forEach(axis => {
axis.options.gridLines.display = display
axis.originalOptions.gridLines.display = display
})
}
changeFontColor(chartId, color){
const chart = this.charts[chartId]
const scales = chart.scales
Object.keys(scales)
.map(key => scales[key])
.forEach(axis => {
axis.originalOptions.scaleLabel.fontColor = color
axis.originalOptions.ticks.fontColor = color
axis.options.scaleLabel.fontColor = color
axis.options.ticks.fontColor = color
})
chart.options.title.fontColor = color
chart.options.legend.labels.fontColor = color
}
getXAxisMinimum(chartId){
return this.charts[chartId]
.options
.scales
.xAxes[0]
.time
.min
}
setXAxisMinimum(chartId, minimum){
this.charts[chartId]
.options
.scales
.xAxes[0]
.time
.min = minimum
}
getXAxisMaximum(chartId){
return this.charts[chartId]
.options
.scales
.xAxes[0]
.time
.max
}
setXAxisMaximum(chartId, maximum){
this.charts[chartId]
.options
.scales
.xAxes[0]
.time
.max = maximum
}
setXAxisLabel(chartId, dataset, title){
const axis = this.charts[chartId].scales["x-axis-" + dataset]
const scaleLabel = axis.options.scaleLabel
scaleLabel.display = title? true:false
scaleLabel.labelString = title
const originalScaleLabel = axis.originalOptions.scaleLabel
originalScaleLabel.display = title? true:false
originalScaleLabel.labelString = title
}
setYAxisLabel(chartId, axisId, title){
const axis = this.charts[chartId].scales[axisId]
const scaleLabel = axis.options.scaleLabel
scaleLabel.display = title? true:false
scaleLabel.labelString = title
const originalScaleLabel = axis.originalOptions.scaleLabel
originalScaleLabel.display = title? true:false
originalScaleLabel.labelString = title
}
getData(chartId, datasetId){
return this.charts[chartId]
.data
.datasets[datasetId]
.data
}
setData(chartId, datasetId, data){
this.charts[chartId]
.data
.datasets[datasetId]
.data = data
}
setPointColor(chartId, datasetId, pointColor){
this.charts[chartId]
.data
.datasets[datasetId]
.pointBorderColor = pointColor
}
getPointColor(chartId, datasetId){
const dataset = this.charts[chartId]
.data
.datasets[datasetId]
if(dataset.pointBorderColor === undefined){
dataset.pointBorderColor = []
}
return dataset.pointBorderColor
}
getChartDatasetInfo(){
return this.charts.map((chart, index) => [index, chart.data.datasets.length])
}
getThreshCallback(chartId, rawLrv){
var plotOpt = this.charts[chartId].options
var loRed = parseInt(rawLrv.lowerRedLimit)
var loYellow = parseInt(rawLrv.lowerYellowLimit)
var hiRed = parseInt(rawLrv.upperRedLimit)
var hiYellow = parseInt(rawLrv.upperYellowLimit)
plotOpt.annotation.annotations = []
var min = parseInt(this.charts[chartId].scales["y-axis-0"].min)
var max = parseInt(this.charts[chartId].scales["y-axis-0"].max)

}
update(chartId, lrv = null) {
if(chartId === undefined){
for(var x = 0; x<this.charts.length; x++){
this.charts[x].update()
}
}
else {
this.charts[chartId].update()
}
}
changeLineSymbol(chartId, datasetId, symbol) {
const dataset = this.charts[chartId]
.data
.datasets[datasetId]
if(symbol){
dataset.pointRadius = 6
dataset.pointStyle = symbol
} else {
dataset.pointRadius = 0
}
}
changeLineStyle(chartId, datasetId, style) {
this.charts[chartId]
.data
.datasets[datasetId]
.borderDash = style
}
getLineStyle(chartId, datasetId) {
return this.charts[chartId]
.data
.datasets[datasetId]
.borderDash
}
changeLineColor(chartId, datasetId, color) {
const dataset = this
.charts[chartId]
.data
.datasets[datasetId]
dataset.borderColor = color.line
dataset.backgroundColor = color.fill
}
addChart(chartData) {
const ctx = document.createElement('canvas')
const container = document.createElement('ray-chart')
container.appendChild(ctx)

var ds = chartData.data.datasets
for(var a = 0;a<ds.length;a++){
ds[a].borderColor ="rgba(0,255,0,1)"
}

const chart = new Chart (ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
})
chart.options.annotation= {}

//default annotations off
chart.options.annotation.display = false

container.addEventListener("dblclick", () => {
if(chart.options.pan.enabled || chart.options.zoom.enabled){
chart.resetZoom()
}
}, false)


this.charts.push(chart)
this.root.appendChild(container)
this.layout()
}
// Remove a chart from the stack of charts in the plot.
removeChart(chartId) {
const chart = this.charts[chartId]
this.charts.splice(chartId, 1)
this.root.removeChild(chart.chart.canvas.parentNode)
this.layout()
}
resetZoom(chartId) {
const chart = this.charts[chartId]
if(chart.options.pan.enabled || chart.options.zoom.enabled){
chart.resetZoom()
}
}
alarm(chartId, togle){
const chart = this.charts[chartId]
if(togle =='off'){
chart.options.annotation = {
display:false
}
chart.update()
chart.options.annotation = {
display:false
}
}else{
chart.options.annotation.display = true
if(this.globlrv !== null){
this.getThreshCallback(chartId, this.globlrv)
chart.update()
this.getThreshCallback(chartId, this.globlrv)
}
}
}
// Calculates the new height of each chart in the plot and applies
// the new style.
layout() {
const size = 1/this.root.childNodes.length * 100
Array.from(this.root.childNodes).forEach((node) => {
node.style.height = size + "%"
})
}
staticPage() {
const root = document.createElement("div")
root.style.backgroundColor = this.root.style.backgroundColor
root.style.position = "absolute"
this.charts.map(chart => {
let img = document.createElement("img")
img.setAttribute("src", chart.toBase64Image())
img.style.display = "block"
img.style.backgroundColor = chart.chart.canvas.parentNode.style.backgroundColor
return img
})
.forEach(item => root.appendChild(item))
const body = document.createElement("body")
body.appendChild(root)
const html = document.createElement("html")
html.appendChild(document.createElement("head"))
html.appendChild(body)
return html
}
}

Answer 1

如果使用插件脚本，则必须添加插件作为缩放和平移的父级。

事情是这样的。点击此处查找更多详细信息

plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
},

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.3"></script>

样本代码

window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
rectangle: {
borderWidth: 0,
borderSkipped: 'bottom'
}
},
responsive: true,
legend: {
display: false,
position: 'top',
},
title: {
display: true,
text: 'LOADS'
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
enabled: true,
mode: 'xy'
}
}
},
scales: {
yAxes: [
{
stacked: true,
gridLines: {
display: true
},
scaleLabel: {
display: false
},
ticks: {
display: true
}
}
],
xAxes: [{
stacked: true,
scaleLabel: {
display: false
},
ticks: {
display: true,
min: 'January-17',
max: 'December-17'
}
}]
}
}
});
};

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var randomScalingFactor = function () {
return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 10000);
};
var randomColorFactor = function () {
return Math.round(Math.random() * 255);
};
var randomColor = function () {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
var barChartData = {
labels: ["January-16", "February-16", "March-16", "April-16", "May-16", "June-16", "July-16", "August-16", "September-16", "October-16", "November-16", "December-16", "January-17", "February-17", "March-17", "April-17", "May-17", "June-17", "July-17", "August-17", "September-17", "October-17", "November-17", "December-17"],
datasets: [{
label: 'Credit Card',
backgroundColor: "rgba(133,169,69,0.9)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Cash',
backgroundColor: "rgba(151,187,205,0.5)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};