Why won't this html page run, Devexpress documentation ChartJS

StackOverflow https://stackoverflow.com/questions/22468797

  •  16-06-2023
  •  | 
  •  

题

http://chartjs.devexpress.com/Documentation/Tutorial/Configure_Charts?version=13_2

I am trying to make a ChartJS api implementation work however I just don't see what I am missing.

Here is the original page of instructions. 

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
      <!--script type="text/javascript" src="knockout-3.0.0.js"></script-->
      <!--script type="text/javascript" src="angular.min.js"></script-->
      <script type="text/javascript" src="globalize.min.js"></script>
      <script type="text/javascript" src="dx.chartjs.js"></script>

  <!-- ... -->

<script type="text/javascript">
  var chartDataSource = [
{
    year: 1950, Africa: 227, Americas: 331,
    Asia: 1436, Europe: 547, Oceania: 12
},
{
    year: 1960, Africa: 285, Americas: 416,
    Asia: 1718, Europe: 605, Oceania: 15
},
{
    year: 1970, Africa: 365, Americas: 512,
    Asia: 2156, Europe: 657, Oceania: 19
},
{
    year: 1980, Africa: 478, Americas: 612,
    Asia: 2644, Europe: 695, Oceania: 22
},
{
    year: 1990, Africa: 633, Americas: 720,
    Asia: 3180, Europe: 722, Oceania: 26
},
{
    year: 2000, Africa: 810, Americas: 833,
    Asia: 3678, Europe: 731, Oceania: 30
},
{
    year: 2010, Africa: 1016, Americas: 936,
    Asia: 4149, Europe: 728, Oceania: 35
}
];
    $(function () {
        $("#chartContainer").dxChart({
dataSource: chartDataSource,
commonSeriesSettings: {
    argumentField: 'year'
},
series: [{
    name: 'Oceania',            
    valueField: 'Oceania'
}, {
    name: 'Africa',
    valueField: 'Africa'
},{
    name: 'Americas',
    valueField: 'Americas'
},{
    name: 'Asia',
    valueField: 'Asia'
},{ 
    name: 'Europe',
    valueField: 'Europe'
}]
});
      }

</script>



  </head>
  <body>

<div id="chartContainer" style="max-width:700px;height: 300px;"></div>


  </body>

有帮助吗？

解决方案

You missed а closing bracket of your jQuery ready function. It is also not needed to place your internal script to the bottom of the body, as jQuery ready functions is used

So, here is the working script

<script type="text/javascript">
    var chartDataSource = [ ... some data ... ];
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: chartDataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [{ name: 'Oceania', valueField: 'Oceania' }, 
                { name: 'Africa', valueField: 'Africa' },
                { name: 'Americas', valueField: 'Americas' },
                { name: 'Asia', valueField: 'Asia' },
                { name: 'Europe', valueField: 'Europe' }]
         });
    });
</script>
<div id="chartContainer" style="max-width:700px;height: 300px;"></div>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top