无法在 jsFiddle 中呈现 DevExtreme 饼图

Question

在my fiddle, I'm trying to replicate plotting a 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 code is working in ChartJS's fiddle.

因为我没有在 ASP.NET MVC 项目中这样做，chartjs after the DevExpress MVC scripts shall not be an issue

我在这里错过了什么？

Answer 1

检查控制台 - 它找不到 .dxPieChart 函数，因为它无法加载 'insecure' chart.js 脚本：

'Mixed Content: The page at 'https://jsfiddle.net/xameeramir/51h3bmgf/' was loaded over HTTPS, but requested an insecure script 'http://cdn3.devexpress.com/jslib/15.2.10/js/dx.chartjs.js'。此请求已被阻止；内容必须通过 HTTPS 提供。'

也许您为图书馆找到了 https CDN link？

Answer 2

将 http cdn 更改为 https。 devextreme chartjs 13.1.5 库的 https cdn：https://dxjscdn2.blob.core.windows.net/jslib/13.1.5/js/dx.chartjs.js

无法在 jsFiddle 中呈现 DevExtreme 饼图

Unable to render DevExtreme pie chart in jsFiddle

html

javascript

css

jquery

devextreme