Блог

Главная - Вопросы по программированию - Высокие диаграммы не отображают график, но ошибок нет

Высокие диаграммы не отображают график, но ошибок нет

#javascript #jquery #highcharts

Вопрос:

Я работаю над визуализацией данных с помощью Highcharts, но с тех пор, как я начал получать данные из API, они больше не отображаются.

Данные-это ответ от API. Информация получена из массива (здесь мы пытаемся имитировать API), но она по-прежнему не отображается после многих настроек и не отображает никаких ошибок.

Было бы полезно, если бы можно было также указать, как отображать ошибки верхнего уровня.

 $(document).ready(function() {
  Highcharts.setOptions({
    lang: {
      numericSymbols: null
    }
  });

  data = [{
    "chart": {
      "height": 500,
      "renderTo": "chart_ID",
      "type": "line"
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": true
        },
        "enableMouseTracking": false
      }
    },
    "series": [{
      "data": [5000.0, 4100.0, 1000.0, 7500.0, 5100.0, 5000.0],
      "name": "Amount"
    }, {
      "data": [179, 86, 150, 393, 188, 322],
      "name": "Millage"
    }],
    "title": {
      "text": "Jhpiego Fuel Consumption"
    },
    "xAxis": {
      "categories": ["3 Jul", "12 Jul", "13 Jul", "14 Jul", "15 Jul", "16 Jul"]
    },
    "yAxis": {
      "max": 1000000,
      "title": {
        "text": "Fuel Price"
      }
    }
  }]
  apiData = data[0];

  highChartInfo = {
    chart: {
      renderTo: apiData.chart.renderTo,
      type: apiData.chart.type,
      height: 500,
      displayErrors: true
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: apiData.plotOptions.line.dataLabels.enabled
        },
        enableMouseTracking: apiData.plotOptions.line.enableMouseTracking
      }
    },
    title: {
      text: apiData.title.text
    },
    xAxis: {
      categories: apiData.xAxis.categories
    },
    yAxis: {
      title: {
        text: apiData.yAxis.title.text
      },
      max: apiData.yAxis.max
    },
    series: [{
        name: apiData.series[0].name,
        data: apiData.series[0].data
      },
      {
        name: apiData.series[1].name,
        data: apiData.series[1].data
      }
    ],
  }

  console.log(highChartInfo)
  $(data[0].chart.renderTo).highcharts(highChartInfo);
}); 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart_ID" class="chart" style="height: 100%; width: 100%"></div>

Комментарии:

1. Привет , одна проблема, которую я вижу в вашем коде, заключается в том, что вы забыли добавить # , т. е. : $("#" data[0].chart.renderTo).. потому chart_ID что это идентификатор .

2. Вау, большое спасибо, это сработало. Не могу поверить, что я забыл добавить селектор идентификаторов :))

Метки: ,