Question

我正在尝试使用Highcharts和以下代码

<html>
<head>
    <script type="text/javascript" src="/scriptaculous/lib/prototype.js"></script>
    <script type="text/javascript" src="../../Js/prototype-adapter.js"></script>
    <script type="text/javascript" src="../../Js/highcharts.js"></script>
    <script type="text/javascript" src="../../Js/modules/data.js"></script>
</head>
<body>
<div id='gfx' style="width:1024px; min-width: 310px; height: 400px; margin: 0 auto"></div>
<pre id='csv'>Production,Duration
2014-10-27,2866,08.50
2014-10-28,6471,09.20
2014-10-29,7609,09.25
2014-10-30,7552,09.11
</pre>
<script type="text/javascript">
    var chart = new Highcharts.Chart({
        chart: {
            type: 'spline',
            renderTo: 'gfx'
        },
        title: {
            text: 'Daily statistics'
        },
        xAxis: {
            type: 'date'
        },
        yAxis: [
            {
                title: { text: 'Watt hours' }
            },
            {
                title: { text: 'Hour.Minutes' },
                opposite: true
            }
        ],
        data: {
            csv: document.getElementById('csv').innerHTML,
            firstRowAsNames: false
        },
        series:[]
    });
</script>

</body>
</html>

但是HightCharts提出错误＃14。我试图将浮点值更改为整数和/或使用dateFormat：强制使用日期格式，但都失败了。

那么，我的错误在哪里？

由于

劳伦

Answer 1

你在这里发生了一些事情：

您的csv有标题，并且您已将firstRowAsNames设置为false

您的csv在标题行中有2个项目，您需要3个

没有＆＃34; date＆＃34; xAxis类型。它＆＃34; datetime＆＃34;

你没有告诉高级图表你希望你的第二个系列映射到你的第二个yAxis。

我使用jquery而不是将其更改为原型来离开小提琴，但相同的代码将起作用。

<pre id="csv" style="display:none">Date,Production,Duration
2014-10-27,2866,08.50
2014-10-28,6471,09.20
2014-10-29,7609,09.25
2014-10-30,7552,09.11</pre>


var chart = new Highcharts.Chart({
    chart: {
        type: 'spline',
        renderTo: 'gfx'
    },
    title: {
        text: 'Daily statistics'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: [{
        title: {
            text: 'Watt hours'
        }
    }, {
        title: {
            text: 'Hour.Minutes'
        },
        opposite: true
    }],
    data: {
        csv: document.getElementById('csv').innerHTML,
        firstRowAsNames: true
    },
    series: [{
        yAxis: 0
    }, {
        yAxis: 1
    }]
});

http://jsfiddle.net/c92acrvx/2/

尝试读取CSV数据时出现错误＃14

1 个答案: