在Chartjs 3.9.1中使用插件设置主题

v2g6jxz6 于 2022-11-06 发布在 Chart.js

关注(0)|答案(3)|浏览(241)

我试图设置主题使用插件在新版本的chartjs 3.9.1，我试图添加“chartjs插件-colorschemes”插件，链接是：https://nagix.github.io/chartjs-plugin-colorschemes/。
在chartjs v2.9.3的旧版本中，此插件工作正常。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="chartMenu">
        <p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
    </div>
    <div class="chartCard">
        <div class="chartBox" style="width: 500px">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-colorschemes/0.4.0/chartjs-plugin-colorschemes.min.js">

        </script>

    <script>

        const data = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [1, 2, 3].map(function (i) {
                return {
                    label: 'Dataset ' + i,
                    data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),
                    fill: false
                }
            })
        };

        const config = {
            type: 'line',
            data,
            options: {
                plugins: [
                    {
                        "colorschemes": {
                            scheme: 'brewer.RdYlBu3',
                        }
                    }]
            },
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

    </script>

</body>

</html>

这里是我尝试的代码，有人能请指导我我错过了什么。谢谢。

chart.js

来源：https://stackoverflow.com/questions/73973835/set-theme-using-plugin-in-chartjs-3-9-1

3条答案

按热度按时间

1yjd4xko1#

它从来没有正确地更新为V3，所以你唯一可以尝试的是，如果他们做的出口也适用于CDN版本的分发，并尝试注册它.否则，你将需要等待，直到或如果插件曾经得到更新，以与V3及以上版本：
如果CDN版本支持的话，这可能会起作用，否则你就不走运了，需要继续使用V2或者自己实现插件和着色：

Chart.register(ColorSchemesPlugin);

const data = {};
const config = {};

new Chart(ctx, config);

赞(0）回复(0）举报 2022-11-06

vmpqdwk32#

演示站点使用chart.js v2.8.0。正如您在此页面上看到的，您尝试使用的插件不适用于chart.js v3和更高版本。
您可能可以查看this pluging并根据需要对其进行调整，以生成要使用的颜色。

赞(0）回复(0）举报 2022-11-06

xqk2d5yq3#

下面是一些解决方法，

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Getting Started with Chart JS with www.chartjs3.com</title>

</head>

<body>
  <div class="chartMenu">
    <p>WWW.CHARTJS3.COM (Chart JS 3.9.1)</p>
  </div>
  <div class="chartCard">
    <div class="chartBox">
      <canvas id="myChart"></canvas>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
    integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
    integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    const dt = [];
    const labels = [];
    for (let index = 1; index < 20; index++) {
      labels.push("Label_" + index);
      dt.push(index);
    }

   var ThemeDictionary = {

      Classic10: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
        ClassicMedium10: ["#729ece", "#ff9e4a", "#67bf5c", "#ed665d", "#ad8bc9", "#a8786e", "#ed97ca", "#a2a2a2", "#cdcc5d", "#6dccda"],
        ClassicLight10: ["#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"],
        Classic20: ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"],
        ClassicGray5: ["#60636a", "#a5acaf", "#414451", "#8f8782", "#cfcfcf"],
        ClassicColorBlind10: ["#006ba4", "#ff800e", "#ababab", "#595959", "#5f9ed1", "#c85200", "#898989", "#a2c8ec", "#ffbc79", "#cfcfcf"],
        ClassicTrafficLight9: ["#b10318", "#dba13a", "#309343", "#d82526", "#ffc156", "#69b764", "#f26c64", "#ffdd71", "#9fcd99"],
        ClassicPurpleGray6: ["#7b66d2", "#dc5fbd", "#94917b", "#995688", "#d098ee", "#d7d5c5"],
        ClassicPurpleGray12: ["#7b66d2", "#a699e8", "#dc5fbd", "#ffc0da", "#5f5a41", "#b4b19b", "#995688", "#d898ba", "#ab6ad5", "#d098ee", "#8b7c6e", "#dbd4c5"],
        ClassicGreenOrange6: ["#32a251", "#ff7f0f", "#3cb7cc", "#ffd94a", "#39737c", "#b85a0d"],
        ClassicGreenOrange12: ["#32a251", "#acd98d", "#ff7f0f", "#ffb977", "#3cb7cc", "#98d9e4", "#b85a0d", "#ffd94a", "#39737c", "#86b4a9", "#82853b", "#ccc94d"],
        ClassicBlueRed6: ["#2c69b0", "#f02720", "#ac613c", "#6ba3d6", "#ea6b73", "#e9c39b"],
        ClassicBlueRed12: ["#2c69b0", "#b5c8e2", "#f02720", "#ffb6b0", "#ac613c", "#e9c39b", "#6ba3d6", "#b5dffd", "#ac8763", "#ddc9b4", "#bd0a36", "#f4737a"],
        ClassicCyclic13: ["#1f83b4", "#12a2a8", "#2ca030", "#78a641", "#bcbd22", "#ffbf50", "#ffaa0e", "#ff7f0e", "#d63a3a", "#c7519c", "#ba43b4", "#8a60b0", "#6f63bb"],
    }

    var Theme = "Classic10"

    // setup 
    const data = {
      labels: labels,
      datasets: [{
        label: 'Weekly Sales',
        data: dt,
        backgroundColor: ThemeDictionary[Theme],
        borderWidth: 1
      }]
    };

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true
              }
            }
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );

  </script>

</body>

</html>

您可以创建自己的主题颜色，并添加到“ThemeDictionary”字典与关键字，并设置您的关键字到“Theme”变量，就是这样。
如果我错过了什么，请告诉我。

赞(0）回复(0）举报 2022-11-06

我来回答

在Chartjs 3.9.1中使用插件设置主题

3条答案

相关问题

热门标签

最新问答