时间戳

首页 > 解决方案 > 在 HighCharts 中绘制 JSON 数据时遇到问题

javascript - 在 HighCharts 中绘制 JSON 数据时遇到问题

问题描述

我目前正在提取我想在我的页面上绘制为简单图表的数据。到目前为止，我的代码如下所示：

    var test = [{'minute': '09:30', 'close': 286.54}, {'minute': '09:45', 'close': 285.93}, {'minute': '10:00', 'close': 284.915}, {'minute': '10:15', 'close': 284.435}, {'minute': '10:30', 'close': 284.96}, {'minute': '10:45', 'close': 284.33}, {'minute': '11:00', 'close': 284.1}, {'minute': '11:15', 'close': 283.29}, {'minute': '11:30', 'close': 283.32}, {'minute': '11:45', 'close': 283.21}, {'minute': '12:00', 'close': 283.25}, {'minute': '12:15', 'close': 283.52}, {'minute': '12:30', 'close': 283.17}, {'minute': '12:45', 'close': 283.245}, {'minute': '13:00', 'close': 282.9}, {'minute': '13:15', 'close': 283.21}, {'minute': '13:30', 'close': 283.13}, {'minute': '13:45', 'close': 283.18}]

    Highcharts.chart('my-container', {
        chart: {
            type: 'area',
        },
        series: [{
            data: test,
        }] /* series */
    });

但是，这只会返回一个空白图表。关于我哪里出错的任何想法（我对 JS 非常陌生）？谢谢

标签： javascripthighcharts

解决方案

我只是从您的数据中提取 5 项并显示：

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
   </head>
   <body>
      <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
      <script language="JavaScript">
         $(document).ready(function () {
             var chart = {
                 type: 'bar'
             };
             var title = {
                 text: 'Example of your chart'
             };
             var subtitle = {
                 text: 'Source: Wikipedia.org'
             };
             var xAxis = {
                 categories: ['09:30', '09:45', '10:00', '10:15', '10:30'],
                 title: {
                     text: null
                 }
             };
             var yAxis = {
                 min: 0,
                 title: {
                     text: 'unit (inches)',
                     align: 'high'
                 },
                 labels: {
                     overflow: 'justify'
                 }
             };
             var tooltip = {
                 valueSuffix: ' unit'
             };
             var plotOptions = {
                 bar: {
                     dataLabels: {
                         enabled: true
                     }
                 }
             };
             var legend = {
                 layout: 'vertical',
                 align: 'right',
                 verticalAlign: 'top',
                 x: -40,
                 y: 100,
                 floating: true,
                 borderWidth: 1,
         
                 backgroundColor: (
                     (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'),
                 shadow: true
             };
             var credits = {
                 enabled: false
             };
             var series = [
                 {
                     name: '09:30',
                     data: [286.54]
                 },
                 {
                     name: '09:45',
                     data: [285.93]
                 },
                 {
                     name: '10:00',
                     data: [284.915]
                 },
                 {
                     name: '10:15',
                     data: [284.435]
                 },
                 {
                     name: '10:30',
                     data: [284.96]
                 },
             ];
         
             //var test = [{ 'minute': '09:30', 'close': 286.54 },
             //    { 'minute': '09:45', 'close': 285.93 },
             //    { 'minute': '10:00', 'close': 284.915 },
             //    { 'minute': '10:15', 'close': 284.435 },
             //    { 'minute': '10:30', 'close': 284.96 },
             //    { 'minute': '10:45', 'close': 284.33 },
             //    { 'minute': '11:00', 'close': 284.1 },
             //    { 'minute': '11:15', 'close': 283.29 },
             //    { 'minute': '11:30', 'close': 283.32 },
             //    { 'minute': '11:45', 'close': 283.21 },
             //    { 'minute': '12:00', 'close': 283.25 },
             //    { 'minute': '12:15', 'close': 283.52 },
             //    { 'minute': '12:30', 'close': 283.17 },
             //    { 'minute': '12:45', 'close': 283.245 },
             //    { 'minute': '13:00', 'close': 282.9 },
             //    { 'minute': '13:15', 'close': 283.21 },
             //    { 'minute': '13:30', 'close': 283.13 },
             //    { 'minute': '13:45', 'close': 283.18 }]
             var json = {};
             json.chart = chart;
             json.title = title;
             json.subtitle = subtitle;
             json.tooltip = tooltip;
             json.xAxis = xAxis;
             json.yAxis = yAxis;
             json.series = series;
             json.plotOptions = plotOptions;
             json.legend = legend;
             json.credits = credits;
             $('#container').highcharts(json);
         });
      </script>
   </body>
</html>

推荐阅读