如何解决将 JsCharts 添加到 Tampermonkey
我正在尝试将 JsCharts 添加到 Tampermonkey 脚本,但它无法正常工作。这是脚本代码和图表如何继续旋转加载指标的图像。我怎样才能做到这一点?
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://localhost:10050/
// @require http://code.jquery.com/jquery-3.6.0.slim.min.js
// @require https://code.jscharting.com/latest/jscharting.js
// @grant none
// ==/UserScript==
$(document).ready(function() {
'use strict';
// Your code here...
$('body').append('<div id="chartDiv" style="width:50%; height:300px; margin: 0 auto;"></div>')
drawChart('chartDiv');
})();
function drawChart(element) {
JSC.Chart(element,{
type: 'horizontal column',series: [
{
points: [
{x: 'Apples',y: 50},{x: 'Oranges',y: 42}
]
}
]
});
};
解决方法
不要使用 JSCharting,这是一种带有精简代码的专有图表框架,而是从像 Chart.js 这样的开源库开始。
下图源自the documentation。我修改为符合一些基本数据。
用户脚本
// ==UserScript==
// @name Chart Example
// @namespace http://tampermonkey.net/
// @version 1.0.0
// @description try to take over the world!
// @author You
// @match https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/*
// @require https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
// @resource CHART_JS_CSS https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
(function() {
/* global Chart */
/* eslint-disable no-multi-spaces,no-return-assign */
'use strict';
GM_addStyle(`${GM_getResourceText('CHART_JS_CSS')}
.chart-wrapper {
position: fixed;
width: 400px;
height: 200px;
z-index: 1000;
right: 1em;
top: 1em;
background: rgba(255,255,0.9);
border: thin solid grey;
}
`);
const main = () => {
document.body.prepend(createElement('div',{
props: {
className: 'chart-wrapper'
},children: [
createElement('canvas',{
attrs: { id: 'my-canvas' }
})
]
}));
const chartData = {
label: '# of Votes',data: [
{ key: 'Red',value: 12,backgroundColor: 'rgba(255,99,132,0.2)',borderColor: 'rgba(255,1)' },{ key: 'Blue',value: 19,backgroundColor: 'rgba(54,162,235,borderColor: 'rgba(54,{ key: 'Yellow',value: 3,206,86,{ key: 'Green',value: 5,backgroundColor: 'rgba(75,192,borderColor: 'rgba(75,{ key: 'Purple',value: 2,backgroundColor: 'rgba(153,102,borderColor: 'rgba(153,1)' },{ key: 'Orange',159,64,1)' }
]
};
const myChart = createSimpleBarChart('#my-canvas',chartData);
};
const createChart = (canvas,settings) => new Chart((typeof canvas === 'string' ? document.querySelector(canvas) : canvas).getContext('2d'),settings);
const createElement = (tagName,config = {}) => {
const el = document.createElement(tagName);
if (config.attrs) Object.entries(config.attrs).forEach(([attr,val]) => el.setAttribute(attr,val));
if (config.props) Object.entries(config.props).forEach(([prop,val]) => el[prop] = val);
if (config.css) Object.entries(config.css).forEach(([prop,val]) => el.style[prop] = val);
if (config.children) config.children.forEach(child => el.append(child));
return el;
};
const createSimpleBarChart = (selector,chartData) => {
const { data,label } = chartData;
return createChart(selector,{
type: 'bar',data: {
labels: data.map(({ key }) => key),datasets: [{
label: label,data: data.map(({ value }) => value),backgroundColor: data.map(({ backgroundColor }) => backgroundColor),borderColor: data.map(({ borderColor }) => borderColor),borderWidth: 1
}]
},options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
main();
})();
演示
const main = () => {
document.body.prepend(createElement('div',{
props: {
className: 'chart-wrapper'
},children: [
createElement('canvas',{
attrs: { id: 'my-canvas' }
})
]
}));
const chartData = {
label: '# of Votes',data: [
{ key: 'Red',1)' }
]
};
const myChart = createSimpleBarChart('#my-canvas',chartData);
};
const createChart = (canvas,settings);
const createElement = (tagName,config = {}) => {
const el = document.createElement(tagName);
if (config.attrs) Object.entries(config.attrs).forEach(([attr,val));
if (config.props) Object.entries(config.props).forEach(([prop,val]) => el[prop] = val);
if (config.css) Object.entries(config.css).forEach(([prop,val]) => el.style[prop] = val);
if (config.children) config.children.forEach(child => el.append(child));
return el;
};
const createSimpleBarChart = (selector,chartData) => {
const { data,label } = chartData;
return createChart(selector,{
type: 'bar',data: {
labels: data.map(({ key }) => key),datasets: [{
label: label,borderWidth: 1
}]
},options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
main();
.chart-wrapper {
position: fixed;
width: 400px;
height: 200px;
z-index: 1000;
right: 1em;
top: 1em;
background: rgba(255,0.9);
border: thin solid grey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。