Question

简短的explenation：javascript从表中获取数组。第1列到第4列的一个组合数组，其中包含xAxis的日期（月，日，年，小时 - 稍后将更改为仅几天）以及表中最后一列的数组，其中包含销售金额。

看起来它应该有效，但它不是吗？我一直在试图让它工作，但没有任何结果。有人知道什么了吗？

由于

    //converting the first table columns to xaxis label
  var colValsM = $('table:first td:nth-child(1)').map(function(){
        return $(this).text();
    }).get();
    var colValsD = $('table:first td:nth-child(2)').map(function(){
        return $(this).text();
    }).get();
    var colValsY = $('table:first td:nth-child(3)').map(function(){
        return $(this).text();
    }).get();
  var colValsH = $('table:first td:nth-child(4)').map(function(){
        return $(this).text();
    }).get();
  //the amount sold
    var colValsChart = $('table:first td:nth-child(6)').map(function(){
        return $(this).text();
    }).get();
    var colDate = [];
    var rowCount = $('table:first').find('tr').length;
  //combine day, month, year and hour
    for (i = 0; i < rowCount; i++) {
        colDate[i] = colValsD[i] + "/" + colValsM[i] + "/" + colValsY[i] + " (" + colValsH[i] + "h)"
    }
console.log(colDate);
console.log(colValsChart);

//Highcharts
$(function () {
$('#container').highcharts({
            chart: {
            type: 'line',
            zoomType: 'x'
        },
        title: {
            text: 'Demand'
        },
        xAxis: {
            categories: colDate,
            labels:{
                step: 72,
                rotation: 315
            }
        },
        yAxis: {
            title: {
                text: 'Amount'
            }
        },
        legend: {
                enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                enableMouseTracking: true
            }
        },
        series: [{
            name: 'Sales',
            data: colValsChart
        }]
    });
});

Answer 1

您的colValsChart是一个字符串数组。它需要是数字。将这些字符串解析为数字，它工作正常。 https://jsfiddle.net/w36qfgds/9/

var colValsChart = $('table:first td:nth-child(6)').map(function(){
    return parseInt($(this).text(),10);
}).get();

顺便说一下，highcharts可以从html表输入创建一个图表。这可能是一个更简单的解决方案http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/

我不能让这个高级代码工作，有人知道它为什么不起作用吗？

1 个答案: