Question

作为ajax调用的结果，我有以下字符串：

＆＃34; A，B，C，D，A，B，C，D，A，B，C，D＆＃34;

我想要的是将所有A个字符放在图表的列中，然后将所有B和C放在同一个方式中，问题在于我的ajax打电话我做这样的事情：

var t = data.d;
var split;
var datos = t.split(",");

然后我制作for loop仅选择A B等等。

我的问题是，我能做些什么才能把我的价值(datos[i] for example)放在我的图表中，我知道必须添加一个阵列，但我不知道我能做些什么。

这是我想要的example

Answer 1

您需要创建变量并将设置设置为JSON，然后将其传递给highcharts(options)

例如

var options = {some:value,some:[..array..]}

然后自定义series选项并循环遍历数组（）;并推送名称，像这样的数据

options["series"] = [];
var names = array();//"A, B, C".split(",");
var data = [[1,1],[2,2],[3,3]];

for(var i=0;i<array().length;i++){

options["series"].push({
name:"Letter " + array()[i], // Letter A
data:data[i] // [1,1]
});

}

你的例子应该是

$(document).ready(function () {
  chart();
});

function chart() {

   // create variable options to store your settings

    var options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Letters'
        },
        subtitle: {
            text: ':P'
        },
        xAxis: {
            categories: ['Col 1', 'Col 2', 'Col 3', 'Col 4'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ':P',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' letters'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        }
    }

    // the lets customize series data

    options["series"] = [];
    var my_letters = letters();// see letters function below
    var my_values = values();// see values function below

    for(var i=0;i<my_letters.length;i++){
        options["series"].push({
            name: 'Letter '+my_letters[i],
            data: my_values[i]
        });
    }

  $('#container').highcharts(options);
}

function letters() {
  var data = "A, B, A, B, A, B, C, A";
  var split = data.split(",");
  return split;
}
function values() {
  var data = [[1,1], [2,2], [3,3], [4,4], [5,5], [6,6], [7,7], [8,8]];
  return data;
}

Answer 2

我在你的样本中修改了你的js代码。

我把数组放在x轴上

$(document).ready(function () {
  var splitx = array();
  chart(splitx);
});
function chart(splitx) {
  $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Letters'
        },
        subtitle: {
            text: ':P'
        },
        xAxis: {
            categories: splitx            
        },
        yAxis: {
            min: 0,
            title: {
                text: ':P',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' letters'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Letter A',
            data: [4, 4]
        }, {
            name: 'Letter B',
            data: [3, 3]
        }, {
            name: 'Letter C',
            data: [1, 1]
        }]
    });
}

function array() {
  var data = "A,B,C,D,E,F,G,H";
  return data.split(",");  
}

Answer 3

以下是一个工作示例，说明如何将输入字符串解析为图表，以便将字母计数作为值：

https://jsfiddle.net/g92acxt7/

var input = "A, B, A, B, A, B, C, A";
var letters = input.split(', ');
var count = {};

// Counting letters
letters.forEach(function(letter) {
    count[letter] = ++count[letter] || 1;
});
console.log(count); // {A: 4, B: 3, C: 1}

var options = {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Letters'
  },
  subtitle: {
    text: ':P'
  },
  xAxis: {
    categories: ['Col 1', 'Col 2', 'Col 3', 'Col 4'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: ':P',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' letters'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Letter A',
    // Insert letters counts
    data: [count['A'], count['A']]
  }, {
    name: 'Letter B',
    // Insert letters counts
    data: [count['B'], count['B']]
  }, {
    name: 'Letter C',
    // Insert letters counts
    data: [count['C'], count['C']]
  }]
};

Highcharts.chart（document.getElementById（＆＃39; container＆＃39;），options）;

如何将特定值添加到highchart

3 个答案: