如何将特定值添加到highchart

How to add specific values to highchart

本文关键字：添加 highchart      更新时间：2023-09-26

我有一个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)，在我的图表，我知道这必须是一个数组添加，但我不知道我能做什么。

这是我想要的一个例子

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

例如

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

然后自定义series选项并遍历数组();push name，数据像这样

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;
}

我修改了示例中的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(",");  
}

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

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 (. getelementbyid("容器")选项),

相关文章：