Question

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

    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非常陌生）？谢谢

Answer 1

我只是从您的数据中提取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>

Answer 2

该图表为空白，因为您的数据结构不正确，Highcharts不知道如何处理。如果您需要保留现在的数据结构，则可以快速准备该函数，该函数会将定义的数据处理为所需的结构，例如：

function processData(data) {
    var arr = [];
  data.forEach(p => {
        arr.push({
        name: p.minute,
      y: p.close
    })
    })

  return arr
}

然后只需将该函数series.data调用为series.data的值即可：

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

实时示例： https://jsfiddle.net/60gs2b7c/

亲切的问候！

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

2 个答案: