个人中心
gpt4 book ai didi

javascript - Highcharts 解析的深入分析未显示在页面上，但显示在控制台中

转载 作者：行者123 更新时间：2023-11-28 07:10:09 25 4
gpt4 key购买 nike

我在 Highcharts 4 中使用 jQuery 1.9.1 设​​置了一个简单的柱形图，我在其中解析了 CSV 文件。我得到了带有柱形图的正常页面，但是当我单击条形图时没有任何反应。实际上，我确实看到在控制台 (IE11) 中创建的数组，它们似乎正是我所需要的，它们的语法正确且 ID 匹配。

JS fiddle [是...://jsfiddle.net/tjxwty3y/...我在底部的编辑中更改了这一点]。我放了一个我使用的 CSV 示例，但不知道如何将外部链接到 JS Fiddle。我已经尝试过在代码中嵌入 CSV/TSV 的示例，并且它们有效，所以我认为这与我推送数据的方式有关，因此与外部引用有关。

CSV 非常简单。我在第一列中有 3 个类别，前面的图表中包含它们的值，后面是第三列中的 ID，最后是第四列和第五列中的向下钻取值。 

CSV looks like this
AREA,VALUE,TYPE,SHIFT1,SHIFT2
Blog1,50000,Blog1_Shift,5,6
Blog2,60000,Blog2_Shift,2,3
Blog3,40000,Blog3_Shift,7,8

我已经看过多篇帖子(和一些视频)，其中 CSV 或 TSV 位于 JS Fiddle 和 Highcharts 网站上，但我完全没有看到我哪里出了问题(而且我知道我有)。

以防万一，这里是来自 js fiddle 的原始数据，它具有库(我通常使用 Higcharts 4 和 JQuery 1.11，但这里我修改了一些使用 JQuery 1.9.1 的旧代码):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>

    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/highcharts.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/modules/data.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/modules/drilldown.js"></script>
    <style type='text/css'></style>

    <script type='text/javascript'>
        //<![CDATA[
        $(window).load(function () {
            $(document).ready(function () {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'My Title Here'
                    },
                    xAxis: {
                        categories: [],
                        name: []
                    },
                    yAxis: {
                        title: {
                            text: 'Value Here'
                        }
                    },
                    legend: {

                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 15,
                        borderWidth: 0,
                        itemStyle: {

                            color: '#333',
                            fontSize: '15px',

                        },
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',

                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '15px',

                            }
                        }
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true
                    },

                    plotOptions: {
                        series: {

                            marker: {
                                lineWidth: 1
                            }
                        }
                    },

                    series: [],
                    drilldown: []

                };

                $.get("http://my/csv/notvalid/dev_drilldown4.csv", function (csvData) {

                    var lines = csvData.split('\n');

                    var series = {
                        data: [],
                        visible: true,
                        type: 'column',
                        colorByPoint: true,
                        drilldown: true
                    };

                    var drilldown = {
                        series: []
                    };

                    $.each(lines, function (lineNo, line) {

                        if (lineNo > 0 && lineNo < 4) {

                            var items = line.split(',');
                            var seriesname = String(items[0]); // this is the area
                            var area_cost = parseFloat(items[1]); // this is the data for the rollup
                            var drill_id = String(items[2]); // this will be the id of the drilldown
                            var shift_one_value = parseFloat(items[3]); // shift1 value
                            var shift_two_value = parseFloat(items[4]); // shift2 value

                            series.data.push({
                                name: seriesname,
                                y: area_cost,
                                drilldown: drill_id
                            });

                            drilldown.series.push({
                                id: drill_id,
                                data: [["shift1", shift_one_value],["shift2", shift_two_value]]
                            });

                        }


                    });
                    console.log(series.data);
                    console.log(drilldown.series);

                    options.series.push({ data: series.data });
                    options.drilldown.push({ series: drilldown.series });

                    var chart = new Highcharts.Chart(options);
                });
            });
        });

    </script>

</head>

<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>

</html>

我感谢任何帮助/建议。谢谢

编辑:现在我已经添加了 Salman 和 Pawell 的编辑，包括将 CSV 添加到 jsFiddle(请参阅 Pawell 的 jsFiddle 了解它现在的样子)，我遇到了一个额外的问题，但它现在正在工作!

我意识到我忘记了该系列的“名称”，并在调整“var系列”并将“series.data.push”更改为“series.push”中添加了该名称，并观看了 Salman 提到的日志。现在什么也没有出现，但控制台日志似乎显示了带有名称、ID 和数据的数据，但没有图表(也没有错误)。

js fiddle 是:http://jsfiddle.net/5jzb8hzb/1/ 。您知道为什么更改“series.data.push”会导致初始图表无法呈现吗？

最佳答案

正如@Salman 所注意到的，存在几个问题:

  • 首先加载 Highcahrts，然后加载rilldown.js(仅在 jsFiddle 中出现问题)
  • 您不应推送到钻取数组，而应分配创建的系列
  • 您有drilldown:[]，而应该是drilldown:{}
  • 对于系列，您可以使用 options.series.push({ data: series.data })，而只需使用 options.series.push(series) 或 options.series = [系列]

额外说明:我建议检查值是否不是 NaN - 有时编辑器会在文件末尾创建额外的空新行。

完成所有修复后，这是完全有效的代码:http://jsfiddle.net/tjxwty3y/7/

最小化示例:

var options = {
    chart: {
        renderTo: 'container'
    },
    series: [],
    drilldown: {}

};

var csvData = document.getElementById("data").innerHTML; // like $.get()
var lines = csvData.split('\n');

var series = {
    data: [],
    visible: true,
    type: 'column',
    colorByPoint: true,
    drilldown: true
};

var drilldown = {
    series: []
};
// I know with the below I get an extra line so can deal with that when I get the rest of the data sorted

$.each(lines, function (lineNo, line) {

    if (lineNo > 0 && lineNo < 4) {

        var items = line.split(',');
        var seriesname = String(items[0]); // this is the area name
        var area_cost = parseFloat(items[1]); // this is the data for the area rollup
        var drill_id = String(items[2]); // this will be the id of the drilldown
        var shift_one_value = parseFloat(items[3]); // drilldown shift1 value
        var shift_two_value = parseFloat(items[4]); // drilldown shift2 value

        if(!isNaN(area_cost) && !isNaN(shift_one_value) && !isNaN(shift_two_value))  {
            series.data.push({
                name: seriesname,
                y: area_cost,
                drilldown: drill_id
            });
            drilldown.series.push({
                id: drill_id,
                data: [
                    ["shift1", shift_one_value],
                    ["shift2", shift_two_value]
                ]
            });
        }
    }
});
options.series = [series];
options.drilldown = drilldown;

var chart = new Highcharts.Chart(options);

关于javascript - Highcharts 解析的深入分析未显示在页面上，但显示在控制台中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31385666/

25 4 0
文章推荐： ios - 获取静默推送通知
文章推荐： javascript - SelectedIndexChange 事件处理程序代码
文章推荐： javascript - a href 在 bootstrap 3.0 上不起作用
文章推荐： javascript - 如何存储使用 Angular Directive(指令)的 Accordion 的状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com