将 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>