javascript - हाईचार्ट्स ड्रिलडाउन और चार्ट प्रकार के संयोजन



jquery highcharts (1)

आप अपने ड्रिलडाउन के रूप में नई श्रृंखला जोड़ने के लिए ड्रिलडाउन ईवेंट कॉलबैक फ़ंक्शन का उपयोग कर सकते हैं: http://api.highcharts.com/highcharts#chart.events.drilldown

drilldown: function(e) {
  var chart = this,
    drilldowns = chart.userOptions.drilldown.series,
    series = [];
  e.preventDefault();
  Highcharts.each(drilldowns, function(p, i) {
    if (p.id.includes(e.point.name)) {
      chart.addSingleSeriesAsDrilldown(e.point, p);
    }
  });
  chart.applyDrilldown();
}

आप addSingleSeriesAsDrilldown () का उपयोग कर सकते हैं, इस प्रकार की विधि: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

लेकिन आप इस पद्धति के साथ कई श्रृंखलाएं ड्रिलडाउन के रूप में जोड़ सकते हैं।

यहां आप एक उदाहरण देख सकते हैं कि यह कैसे काम कर सकता है:

http://jsfiddle.net/h5xjp8h5/12/

सधन्यवाद।

मैं अपने ड्रिलडाउन चार्ट (बच्चों के चार्ट में) कॉलम और स्पिन को यहां पसंद करना चाहूंगा: https://jsfiddle.net/lostrailler/Ljotp059/

लेकिन जब मैं कोशिश कर रहा हूं, तो मैं दोनों एक ही समय में नहीं हूं। यहां मेरा कोड है:

var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Scores par paliers'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontFamily: 'Verdana, sans-serif'
            }
        },
        min: 0
    },
    yAxis: {
        title: {
            text: 'Score'
        },
        max: 100,
        tickInterval: 10,
        min: 0
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: true
    },
    tooltip: {
        formatter: function() {
            if (this.point.drilldown) {
                var s = this.key +' : <b>'+ this.y +' %</b>';
            } else {
                var s = this.key +' : <b>'+ this.y + '</b>';
            }
            return s;
        }
    },
    series: [{
            name: 'Marches',
        colorByPoint: true,
        data: [
            {
                name: 'Step 1',
                y: 89,
                drilldown: 'step1'
            },
            {
                name: 'Step 2',
                y: 17,
                drilldown: 'step2'
            }]
    }],
    drilldown: {
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                y: 0,
                x: -50
            }
        },
        series: [
            {
                id: 'step1',
                name: 'Step 1',
                type: 'column',
                data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'column',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            },
            {
                id: 'step1',
                name: 'Step 1',
                type: 'spline',
                data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'spline',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            }]
    }
});

जेस्फील्ड: https://jsfiddle.net/lostrailler/fe1zzwph/

कोई विचार ?

बहुत बहुत धन्यवाद।





drilldown