如何在同一个html源代码标记中使用2个不同版本的chart.js

9nvpjoqh 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(197)

我用两个不同版本的chart.js构建了绘图。一个是用3.8.0，另一个是用2.8.0。所以，我把这两个版本都包括在这样的标签中。

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0"></script>   #For plot1
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>   #for plot2

--〉都是彩色图，所以当我先用js@3.8.0的时候，它是在绘制plot1 as color，但是，plot2我得到的是没有颜色的。
--〉类似地，当我使用js@2.8.0作为第一个src时

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>   #for plot2
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0"></script>   #For plot1

绘图1 I'm getting with无颜色&绘图2 with彩色'😐
我知道在Html中逐行执行script src。有什么方法可以同时使用不同的chartjs版本吗？。有参考吗？
你们想上传代码吗？这是一个非常大的源代码。所以，我只是想从社区的人那里得到关于我的问题的想法
Chart.js @3.8.0版本代码我正在使用
小提琴https://jsfiddle.net/rnsbhargav/x10qjr5k/3/

graph2() {

    const options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          segment: {
            borderColor: (ctx) => (ctx.p0.parsed.y < ctx.p1.parsed.y ? 'green' : 'red')
          }
        }]
      },
      options: {}
    }

    const ctx = document.getElementById('mychart').getContext('2d');
    new Chart(ctx, options);
},

x1c 0d1x所以这在chartjs 3.8.0。我应该需要降级语法吗？。如果是这样的话，如何使这段代码在chartjs 2.0版本上工作...
我发现在挖掘了一些文档后，我知道从@chartjs2迁移到chartjs3的语法是不同的...
所以无论如何是有
1.我可以修改代码并获得与chartjs@2版本相同的输出？
1.有没有什么方法可以使用我们通常在Jquery上使用的.noconflict方法？这样我就可以在源标记上使用2个不同的版本
https://www.chartjs.org/docs/master/getting-started/v3-migration.html

chart.js

来源：https://stackoverflow.com/questions/73026938/how-to-use-2-different-versions-of-chart-js-in-same-html-source-tag

1条答案

按热度按时间

p4tfgftt1#

您可以加载chart.js的旧版本，将其存储在一个变量中，然后加载新版本并将其存储，然后您可以同时使用这两个版本，正如您在下面的示例中所看到的，旧版本默认填充并启用了Beziercurves，v3默认不填充，并具有清晰的线条：

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <canvas id="chartJSContainer2" width="600" height="400"></canvas>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script>
    const chartOld = Chart;
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
  <script>
    const chartNew = Chart;

    const options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: 'orange'
          },
          {
            label: '# of Points',
            data: [7, 11, 5, 8, 3, 7],
            borderColor: 'pink'
          }
        ]
      },
      options: {}
    }

    const ctx = document.getElementById('chartJSContainer').getContext('2d');
    const ctx2 = document.getElementById('chartJSContainer2').getContext('2d');

    new chartNew(ctx, options);
    new chartOld(ctx2, options);
  </script>
</body>

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

我来回答

如何在同一个html源代码标记中使用2个不同版本的chart.js

1条答案

相关问题

热门标签

最新问答