Question

这是我的饼图js代码：

window.onload = function(){
    var pieData = [
                {
                    value: 300,
                    color:getRandomColor(),
                    highlight: "#62b9fb",
                },
                {
                    value: 50,
                    color: "#ffb53e",
                    highlight: "#fac878",
                },
                {
                    value: 100,
                    color: "#1ebfae",
                    highlight: "#3cdfce",
                },
                {
                    value: 120,
                    color: "#f9243f",
                    highlight: "#f6495f",
                }

            ];

    var chart4 = document.getElementById("pie-chart").getContext("2d");
    window.myPie = new Chart(chart4).Pie(pieData, {
        responsive : true
    });

};

我正在使用this javascript插件。我的饼图它可以工作，但它的值是静态的。我相信我必须使用ajax，这不是问题。我的问题是如何解码json后如何创建 piedata 数据格式？如何创建颜色？我必须生成随机颜色？你能帮帮我吗？

Answer 1

也许我不完全理解你的问题;但..

var colors = Highcharts.getOptions().colors, // references stock colors defined in highcharts.js
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
    name = 'Browser brands',
    data = [{
        y: 55.11,
        color: colors[0], // references stock color highcharts.js from color array
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], // JS data arrays
            data: [10.85, 7.35, 33.06, 2.81], // data areas 
            color: colors[0] // references stock color highcharts.js color array
        }
    },

JSFIDDLE

对于自定义颜色，通过highcharts.js可以选择的内容下载完整的js。在那里找到颜色数组，并通过十六进制定义你自己的颜色并调用它们。

如果您需要从特定地点提取数据，则需要指定..

使用图表进行AJAX调用的示例：

var GetChartData = function () {
    $.ajax({
        url: serviceUri,
        method: 'GET',
        dataType: 'json',
        success: function (d) {
           chartData = {
                labels: d.AxisLabels,
                datasets: [
                    {

在javascript中动态获取饼图值

1 个答案: