javascript - 无法在 jsFiddle 中呈现 DevExtreme 饼图

标签 javascript jquery html css devextreme

my fiddle ,我正在尝试 replicate绘制 DevExpress's DevExtreme doughnut chart :

var dataSource = [{
  region: "Asia",
  val: 4119626293
}, {
  region: "Africa",
  val: 1012956064
}, {
  region: "Northern America",
  val: 344124520
}, {
  region: "Latin America and the Caribbean",
  val: 590946440
}, {
  region: "Europe",
  val: 727082222
}, {
  region: "Oceania",
  val: 35104756
}];

$("#container").dxPieChart({
  dataSource: dataSource,
  title: "The Population of Continents and Regions",
  tooltip: {
    enabled: true,
    format: "millions",
    percentPrecision: 2,
    customizeTooltip: function(arg) {
      return {
        text: arg.valueText + " - " + arg.percentText
      };
    }
  },
  legend: {
    horizontalAlignment: "right",
    verticalAlignment: "top",
    margin: 0
  },
  series: [{
    type: "doughnut",
    argumentField: "region",
    label: {
      visible: true,
      format: "millions",
      connector: {
        visible: true
      }
    }
  }]
});
#container {
  height: 440px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

official codeChartJS's fiddle 工作.

由于我没有在 ASP.NET MVC 元素中执行此操作,chartjs after the DevExpress MVC scripts shall not be an issue

我在这里错过了什么?

最佳答案

检查控制台 - 它找不到 .dxPieChart 函数,因为它无法加载“不安全”的 chart.js 脚本:

“混合内容:页面位于”https://jsfiddle.net/xameeramir/51h3bmgf/ ' 通过 HTTPS 加载,但请求了不安全的脚本 ' http://cdn3.devexpress.com/jslib/15.2.10/js/dx.chartjs.js '.此请求已被阻止;内容必须通过 HTTPS 提供。”

也许您找到了库的 https CDN 链接?

关于javascript - 无法在 jsFiddle 中呈现 DevExtreme 饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37830842/

相关文章:

css - 如何为 jquery-ui 对话框按钮添加 <div title ="test"></div> 类似属性

javascript - 调用 javascript 处理程序的正确方法

javascript - 将 moment 与 Javascript Date 一起使用来格式化字符串时如何解决弃用警告

javascript - 如何使用正则表达式获取特定字符后的所有字符,例如逗号 (",")

javascript - jQuery 代码无法按我想要的方式工作

javascript - Sidr 面板的打开和关闭动画不流畅,在智能手机上出现抖动现象

javascript - 使用 JQuery 对子表数据进行排序

javascript - 遍历对象时遇到问题

javascript - 在 js/JQuery 中动态选择 ID

javascript - 如何将div定位到左侧 float 但也 float 到顶部