javascript - HTML 5 chartjs 不能作为静态文件工作-6ren

javascript - HTML 5 chartjs 不能作为静态文件工作

转载作者：行者123 更新时间：2023-11-30 09:20:57

25

4

我正在尝试使用 chartjs使用 HTML5 绘制图表。如果我通过右键单击它并在谷歌浏览器中打开 HTML 文件来打开它，它是否不起作用。我看到以下代码的空白屏幕:

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"/>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>
<body>
<div style="width:75%;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</body>
</html>

我是在代码中做错了什么，还是我需要一个服务器(例如 apache)来运行该页面？

最佳答案

基本上有两个问题:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js" />不是有效的脚本。应该是<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
您的第二个脚本必须在呈现 HTML/DOM 后加载。 getContext ()无法找到 canvas编号。

下面是工作示例:

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>


<body>
  <div style="width:75%;">
    <canvas id="myChart" width="400" height="400"></canvas>
  </div>
</body>
<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
</script>

</html>

关于javascript - HTML 5 chartjs 不能作为静态文件工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51738500/

25

4

0

文章推荐： java - 使用绑定(bind)将所有类型转换为 jaxb 中的字符串

文章推荐： machine-learning - xavier_initializer() 如何知道激活？

文章推荐： java - 使用 jooq 生成一个 InsertSelect

vue-chartjs - 使用 vue-chartjs 的圆形条形图
有没有办法在 vue-chartjs 中制作带圆角的条形图？我在谷歌上搜索了一下，发现我们可以使用此 url 中给出的渲染条的实现来扩展条形图 - How to put rounded corners
jquery - ChartJS/Chartjs-plugin-annotation 如何使用数组绘制多条垂直线？
我想通过提供两个数组来创建多条垂直线，第一个称为marketing，其中包含诸如“2017-09-21”等日期和一个数组称为 amount，仅包含数字。我使用 ChartJS 创建了折线图。最终结果
plugins - chartjs-plugin-streaming + chartjs-插件-缩放
(对不起我的英语)我将 chartjs-plugin-streaming 用于实时 chartjs，我想使用 chartjs-plugin-zoom。但是缩放不起作用。当我测试缩放时，出现缩放区域
javascript - angular2-chartjs/chartjs-plugin-annotation 更新选项仅一次
我使用 angualr2-chartjs 来显示图表。我的问题是当我动态更改选项时图表更新只有一次。在控制台中，我看到一切都很好，但在 View 中我看不到变化。我使用了 chartjs-plugin
javascript - Chartjs 创建类似的背景，就像在 Chartjs.org 中一样
我正在尝试创建类似于 www.chartjs.org 顶部的内容其中有一个随机移动的背景条形图。我发现了另一个类似的question ，但是它似乎不起作用。当我在下面添加时，它不会添加除 400x40
react-chartjs-2 - 为什么 react-chartjs-2 看不到它需要呈现的数据？
感谢任何提示和/或帮助!我在这里碰壁试图让图表呈现。我已经恢复到测试一个非常简单的方法(下面的代码)，但我仍然收到以下错误: 类型错误:无法读取未定义的属性(读取“ map ”) 我可以记录从 use
javascript - 使用 chartjs-plugin-zoom 将缩放事件处理程序添加到 chartjs 的图表
chartjs-plugin-zoom是 Chart.js 的缩放和平移插件您可以调用 chart.resetZoom() 以编程方式将缩放重置为默认状态。参见 this example on js
vue.js - Vue 和 Chartjs - 运行一个简单的 vue-chartjs 示例
我正在尝试将 Chart.js 与 Vue.js 一起使用，这就是我得到的编译结果，但我没有在 GUI 上看到任何显示。这是我的文件 DonutChart.vue: // NOT SURE IF
chart.js - 通过 VueJS 加载 ChartJS - ChartJS 为空且尺寸为 0px
好的，所以我正在尝试通过 VueJS 创建一个 ChartJS 实例，以便我可以通过组件内的 AJAX 请求轻松更新其数据。基本上它可以工作，创建了 ChartJS 实例，但它是空的，高度和宽度为
javascript - 将 chartjs-chart-treemap 与 react-chartjs-2 集成
我想从 chartjs-chart-treemap 添加树状图到我现有的使用 react-chartjs-2 的项目中. 我到目前为止尝试过: import ChartComponent from '
chart.js - Chartjs 2 : Multi level/hierarchical category axis in chartjs
是否可以定义具有多级别/类别轴的条形图？例如，我想显示地区/省类别，如下 Excel 图表所示: 我找到了this使用多个 xAxes 的示例。 xAxes:[ { id:'xA
javascript - ChartJS X 轴标签中的新行 '\n' 或使用 ChartJS V2 在图表或工具提示周围显示更多信息
我正在使用 chart.js (V2) 尝试构建一个条形图，用户无需将鼠标悬停在任何地方或点击任何地方即可获得更多信息。我提供了两个示例，说明我希望如何编辑我的图表。 Two edited versi
javascript - 如何使用 TypeScript 和来自 github 的 Chartjs.definitelyTyped 来计算 Chartjs
我想使用 Chartjs(chartjs.org) 作为我的图表工具以及使用 TypeScript 的 AngularJS。我已经从 GitHub 安装了 DefinitelyTyped for Ch
javascript - Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels
我正在使用 chartjs-plugin-datalabels，并且在大图表中显示较小的数据集时值重叠这是 chartjs-data-plugin 配置 options: { plu
javascript - ChartJS x轴标签显示全部
var yLabels = { 1 : 'New', 2 : 'Learning Phase', 3
javascript - chartJs 中折线图下方区域的背景颜色？
我正在创建图表以使用图表 js 呈现一些数据。 const data = { labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"], dat
javascript - Chartjs - 将附加数据插入图表工具提示
我正在尝试将其他数据插入圆环图中。 Controller 将这样的数组传递给 View : [ 0 => array:3 [ "profit" => 20 "sex" => arr
charts - chartjs 向饼图图例添加百分比
将百分比值添加到图例标签的最简单方法是什么？我相信它会使用 generateLabels: function (chart) {}，谁能提供一个干净的例子？最佳答案似乎没有任何本地方式来显示百分
javascript - Chartjs 拆分两位数
我已经多次看到这个问题，但我找不到适合我的解决方案。我将一个 Django 变量传递给 Chartjs 进行绘图，所有的个位数都是正确的，但它将两位数变成了一个。像 11 是 1,1...23 是
reactjs - chartjs 插件数据标签未在图表上显示值
我正在尝试使用 chartjs 数据标签插件获取每个条上的值。所以在条形“a”上方 a 想看到数字 30 及以上或在条形“b”内我想看到数字 50。但它根本没有显示任何值。任何人都可以帮助并告诉

首页

博学

6Ren·AI

商城

javascript - HTML 5 chartjs 不能作为静态文件工作