Как добавить конкретные значения для highchart

Question

У меня есть следующие строки в результате вызова Ajax:

«A, B, C, D, A, B, C, D, A, B, C, D»

то, что я хочу, чтобы поместить все мои 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 в вашем образце.

Я поставил массив в оси х

$(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 ('container'), опции);