Как я могу изменить ширину столбцов в старшей диаграмме?

С гистограммой, какэтотМожно изменить ширину столбцов, чтобы они представляли другой атрибут данных, скажем, вес плодов. Чем тяжелее фрукты, тем толще планка.

Вы играете со сценариемВот, Я открыт для других библиотек JavaScript, которые могут делать это, пока они бесплатны.

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
                // I would like something like this (3.5, 6 etc is the width) :
                // data: [[5, 3.4], [3, 6], [4, 3.4], [7, 2], [2, 5]]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });

});​
 Benjamin Crouzier25 окт. 2012 г., 14:24
@HardikMishra Хороший вопрос, к сожалению, я хочу различную ширину для каждого бара.
 Koos12 апр. 2013 г., 09:39
То, что вы хотите, называется диаграммой Маримекко. Невозможно создавать диаграммы Marimekko с HighCharts. Однако: вы можете проголосовать за график Marimekko в Highcharts Uservoice:highcharts.uservoice.com/forums/55896-general/suggestions/...
 Amanda26 окт. 2015 г., 03:17
Примечание: я думаю, что решение этого нового вопросаstackoverflow.com/questions/33059377/... также будет работать для ваших нужд.
 Mathachew24 окт. 2012 г., 23:44
Не похоже на это с Highcharts, так как его размер основан на ширине контента. Расширьте свой браузер, и диаграмма будет перерисована, чтобы соответствовать ее новой ширине, если она не зафиксирована, хотя я относительно новичок в Highcharts.

Ответы на вопрос(3)



pointWidth это то, что вам нужно, чтобы установить ширину баров. пытаться

            series: {
                pointWidth: 15
            }
        }


Это отображение полос шириной 15 пикселей. ТренировкаВот, Только что отредактировал уже существующий код.

 Ben07 янв. 2015 г., 23:53
работал для меня и легко применить к объекту пика диаграммы при использовании этого драгоценного камня в рубине
 Akhir29 сент. 2018 г., 17:34
Спасибо, я действительно искал это для бара с отрицательными стеками. Это сработало хорошо!

вероятно, является лучшим вариантом, если у вас есть лицензия на то, чтобы делать более оптимальные графики Marimekko ...

Я проделал небольшую работу, пытаясь найти решение Marimekko для чартов в старших чартах. Он не идеален, но приближается к первому примеру графиков Marimekko, найденному здесь на странице Fusion Charts…

http://www.fusioncharts.com/resources/chart-tutorials/understanding-the-marimekko-chart/

Ключевым моментом является использование оси dateTime, так как этот режим предоставляет вам больше гибкости в распределении точек и линий на оси X, что дает вам возможность иметь «стержни» переменного размера, которые вы можете построить на этой оси. Я использую интервал 0-1000 секунд, и за пределами графика вычисляю сопоставления с этой шкалой, чтобы приблизить процентные значения для шага по вертикальным линиям. Вот (http://jsfiddle.net/miken/598d9/2/ ) является примером jsfiddle, который создает диаграмму столбца переменной ширины.

    $(function () {

    var chart;
        Highcharts.setOptions({
            colors: [ '#75FFFF', '#55CCDD', '#60DD60' ]
        });
        $(document).ready(function() {
            var CATEGORY = {  // number out of 1000
            0: '',    
            475: 'Desktops',
            763: 'Laptops',
            1000: 'Tablets'  
        };
        var BucketSize = {  
            0: 475,
            475: 475,
            763: 288,
            1000: 237   
        };
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'area'
            },
            title: {
                text: 'Contribution to Overall Sales by Brand & Category (in US$)<br>(2011-12)'
            },
            xAxis: {
                min: 0,
                max: 1000,
                title: {
                    text: '<b>CATEGORY</b>'
                },
                tickInterval: 1,
                minTickInterval: 1,
                dateTimeLabelFormats: {
                    month: '%b'
                },
                labels: {
                    rotation: -60,
                    align: 'right',
                    formatter: function() {
                        if (CATEGORY[this.value] !== undefined) {
                            return '<b>' + CATEGORY[this.value] + ' (' + 
                                this.value/10 + '%)</b>';
                        }
                    }
                }
            },
            yAxis: {
                max: 100,
                gridLineWidth: 0,
                title: {
                    text: '<b>% Share</b>'
                },
                labels: {
                    formatter: function() {
                        return this.value +'%'
                    }
                }
            },
            tooltip: {
                shared: true,
                useHTML: true,
                formatter: function () {
                    var result = 'CATEGORY: <b>' +
                        CATEGORY[this.x] + ' (' + Highcharts.numberFormat(BucketSize[this.x]/10,1) + '% sized bucket)</b><br>';
                    $.each(this.points, function(i, datum) {
                        if (datum.point.y !== 0) {
                            result += '<span style="color:' +
                                datum.series.color + '"><b>' +
                                datum.series.name + '</b></span>: ' +
                                    '<b>

Он добавляет дополнительный массив, чтобы позволить вам отображать имена категорий на значения второго тика, чтобы дать вам более «представление» категории, которое вы можете захотеть. Я также добавил код внизу, который добавляет вертикальные разделительные линии между различными столбцами и нижней строкой диаграммы. Возможно, потребуются некоторые изменения размера окружающих меток и т. Д., Которые я здесь жестко прописал в пикселях как часть математики, но это должно быть выполнимо.

Использование акцентирования типа «процент» позволяет вам по шкале y вычислять процентные итоговые значения из необработанных данных, тогда как, как уже отмечалось, вам нужно сделать свою собственную математику для оси x. Я полагаюсь больше на функцию всплывающей подсказки для предоставления меток и т. Д., Чем меток на самой диаграмме.

Еще одним значительным улучшением этих усилий было бы найти способ сделать так, чтобы область всплывающей подсказки и метки фокусировались и центрировались и охватывали саму полосу вместо правой границы каждой полосы, какой она является сейчас. Если кто-то хочет добавить это, не стесняйтесь сюда.

+ datum.point.y + 'K</b> (' + Highcharts.numberFormat( datum.point.percentage,2) + '%)<br/>'; } }); return (result); } }, plotOptions: { area: { stacking: 'percent', lineColor: 'black', lineWidth: 1, marker: { enabled: false }, step: true } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: 0, y: 100, borderWidth: 1, title: { text : 'Brand:' } }, series: [ { name: 'HP', data: [ [0,298], [475,109], [763,153], [1000,153] ] }, { name: 'Dell', data: [ [0,245], [475,198], [763,120], [1000,120] ] }, { name: 'Sony', data: [ [0,335], [475,225], [763,164], [1000,164] ] }] }, function(chart){ // Render bottom line. chart.renderer.path(['M', chart.plotLeft, chart.plotHeight + 66, 'L', chart.plotLeft+chart.plotWidth, chart.plotHeight + 66]) .attr({ 'stroke-width': 3, stroke: 'black', zIndex:50 }) .add(); for (var category_idx in CATEGORY) { chart.renderer.path(['M', (Math.round((category_idx / 1000) * chart.plotWidth)) + chart.plotLeft, 66, 'V', chart.plotTop + chart.plotHeight]) .attr({ 'stroke-width': 1, stroke: 'black', zIndex:4 }) .add(); } }); }); });

Он добавляет дополнительный массив, чтобы позволить вам отображать имена категорий на значения второго тика, чтобы дать вам более «представление» категории, которое вы можете захотеть. Я также добавил код внизу, который добавляет вертикальные разделительные линии между различными столбцами и нижней строкой диаграммы. Возможно, потребуются некоторые изменения размера окружающих меток и т. Д., Которые я здесь жестко прописал в пикселях как часть математики, но это должно быть выполнимо.

Использование акцентирования типа «процент» позволяет вам по шкале y вычислять процентные итоговые значения из необработанных данных, тогда как, как уже отмечалось, вам нужно сделать свою собственную математику для оси x. Я полагаюсь больше на функцию всплывающей подсказки для предоставления меток и т. Д., Чем меток на самой диаграмме.

Еще одним значительным улучшением этих усилий было бы найти способ сделать так, чтобы область всплывающей подсказки и метки фокусировались и центрировались и охватывали саму полосу вместо правой границы каждой полосы, какой она является сейчас. Если кто-то хочет добавить это, не стесняйтесь сюда.

иаграммы переменной ширины. Скажем, каждый столбец / столбец представлен прямоугольной областью.

Смотрите мою скрипку демо (http://jsfiddle.net/calfzhou/TUt2U/).

$(function () {
    var rawData = [
        { name: 'A', x: 5.2, y: 5.6 },
        { name: 'B', x: 3.9, y: 10.1 },
        { name: 'C', x: 11.5, y: 1.2 },
        { name: 'D', x: 2.4, y: 17.8 },
        { name: 'E', x: 8.1, y: 8.4 }
    ];

    function makeSeries(listOfData) {
        var sumX = 0.0;
        for (var i = 0; i < listOfData.length; i++) {
            sumX += listOfData[i].x;
        }
        var gap = sumX / rawData.length * 0.2;
        var allSeries = []
        var x = 0.0;
        for (var i = 0; i < listOfData.length; i++) {
            var data = listOfData[i];
            allSeries[i] = {
                name: data.name,
                data: [
                    [x, 0], [x, data.y],
                    {
                        x: x + data.x / 2.0,
                        y: data.y,
                        dataLabels: { enabled: true, format: data.x + ' x {y}' }
                    },
                    [x + data.x, data.y], [x + data.x, 0]
                ],
                w: data.x,
                h: data.y
            };
            x += data.x + gap;
        }
        return allSeries;
    }

    $('#container').highcharts({
        chart: { type: 'area' },
        xAxis: {
            tickLength: 0,
            labels: { enabled: false}
        },
        yAxis: {
            title: { enabled: false}
        },
        plotOptions: {
            area: {
                marker: {
                    enabled: false,
                    states: {
                        hover: { enabled: false }
                    }
                }
            }
        },
        tooltip: {
            followPointer: true,
            useHTML: true,
            headerFormat: '<span style="color: {series.color}">{series.name}</span>: ',
            pointFormat: '<span>{series.options.w} x {series.options.h}</span>'
        },
        series: makeSeries(rawData)
    });
});

 Adam Zerner01 июл. 2016 г., 00:08
Спасибо вам большое!
 Adam Zerner01 июл. 2016 г., 00:18
rawData должно бытьlistOfData на линии 15.

Ваш ответ на вопрос