jquery स्तंभ चार्ट डेटा लेबल को प्रारूपित करने के तरीके




highcharts (2)

छवि में दिखाए अनुसार स्तंभ चार्ट डेटा लेबल को प्रारूपित करने के लिए, केवल दूसरी बार प्रारूपित करने की आवश्यकता है।

मैंने नीचे दिए गए कोड को देखने की कोशिश की है

[$('#voo-accepted-orders-graph').highcharts({
    chart: {
        type: 'column',
        backgroundColor: '#9a97de',
        minPadding: 0.08,
        maxPadding: 0.08,
    },
    title: {
        text: ''
    },
    legend: {
        enabled: false,
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    xAxis: {
        tickWidth: 0,
        gridLineWidth: 0,
        gridLineColor: "#5c6bc0",
        categories: \['accepted', 'auto-accept', 'sent to PO', 'transfers'\],
        labels: {
            style: {
                color: '#ffffff',
                fontFamily: "Avenir LT std light",
                fontSize: "12px",
                zIndex: 1000
            }

        }
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: ''
        },
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        min: 0,

        tickInterval: 20,

    },
    tooltip: {
        pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>'

    },
    plotOptions: {
        column: {
            color: '#8381cc',
            borderColor: '#8381cc',
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                zIndex: 10,
                color: "#fff",                
                style: {
                    textShadow: false,
                    fontWeight: "normal",
                }

            }
        }
    },

    series: \[{
        name: 'orders',
        data: \[200, 72, 36, 15\]

    }, {
        name: 'price',
        data: \[90, 150, 120, 50\]

    }\]
});][1]

इसके अलावा 1. केवल दूसरी बार प्रारूपित करने की आवश्यकता है। 2. क्या ऊर्ध्वाधर लाइनें प्राप्त करने की कोई संभावना है?


8 जुलाई, 2016 : मैंने एक्स-अक्ष लेबल के पीछे की पृष्ठभूमि को जोड़ने के बारे में मूल पोस्टर के अनुवर्ती प्रश्न को संबोधित करने के लिए इस उत्तर को अपडेट किया है

यदि आप डेटा के केवल एक कॉलम के लिए लेबल्स बदलना चाहते हैं, तो आप उस श्रृंखला में एक विशेष बिंदु पर बस अधिक विशेषताओं को जोड़ सकते हैं।

आपके प्रश्न में कोड का उपयोग करते हुए, मैंने "कीमत" श्रृंखला का पहला अंक बदल दिया ताकि उसका लेबल लाल और बोल्ड हो।

series: [{
    name: 'orders',
    data: [200, 72, 36, 15]

}, {
    name: 'price',
    data: [
        { // change the values for just this point
            y: 90, 
            dataLabels: { 
                color: 'red',
                style: {
                    fontWeight: 'bold'
                }
            } 
        },
        150, 120, 50]
}]

X-axis लेबल के पीछे एक पृष्ठभूमि को जोड़ने पर आपके अनुवर्ती प्रश्न के लिए, मैं हायचैर्ट पोस्ट करता हूं : पृष्ठभूमि का अक्षांश का रंग यहां मैंने उपयोग किया हुआ कोड है:

सबसे पहले, चार्ट विकल्पों को परिभाषित करने से पहले, मैंने एक्स-अक्ष लेबल के पीछे एक आयताकार आकर्षित करने के लिए एक फ़ंक्शन जोड़ा है

  // the following code is derived from Mark's answer on:
  // https://.com/questions/20242302/highchart-background-color-of-axis
  // and using the setExtremes() function found in the Highcharts API documentation at:
  // http://api.highcharts.com/highcharts#Axis.getExtremes
  var rect = null;
  function drawRect(chart){
    if (rect){
      rect.element.remove();   
    }
    // this code draws a rectangle based on the chart's dimensions:
    // 1st attribute: left edge = 0
    // 2nd attribute: top edge = chart's height - (chart's bottom margin - 1) ... -1 to show axis baseline
    // 3rd attribute: width = chart's width
    // 4th attribute: height = chart's bottom margin
    // 5th attribute: corner radius = 0 ... no corners
    rect = chart.renderer.rect(0, chart.chartHeight - (chart.marginBottom-1), chart.chartWidth , chart.marginBottom, 0)
      .attr({
      'stroke-width': 0,
      stroke: '#888888',
      fill: '#888888',
      zIndex: 3
    })
      .add();
  }

इसके बाद, मैं आपके चार्ट विकल्पों में कुछ ईवेंट सेट करता हूं:

chart: {
  type: 'column',
  backgroundColor: '#9a97de',
  minPadding: 0.08,
  maxPadding: 0.08,
  // events code from https://.com/questions/20242302/highchart-background-color-of-axis
  events: {
    load: function() {
      drawRect(this);
    },
    redraw: function(){
      drawRect(this);
    }
  }   
},

यहां परिणाम है:

आप यहां इस उदाहरण के साथ काम करने वाले बेला को पा सकते हैं: http://jsfiddle.net/brightmatrix/0yLn5bky/

मुझे आशा है कि यह आपके लिए उपयोगी है


/* bar bg */
.highcharts-series-1 rect:nth-child(1) {
  fill: #333;
}

/* text color above bar */
.highcharts-series-1 g:nth-child(1) text {
  fill: red !important;
}

/* x axis text colors */
.highcharts-xaxis-labels text:nth-child(1) {
  fill: green !important;
}
.highcharts-xaxis-labels text:nth-child(2) {
  fill: blue !important;
}
.highcharts-xaxis-labels text:nth-child(3) {
  fill: black !important;
}
.highcharts-xaxis-labels text:nth-child(4) {
  fill: pink !important;
}

CODEPEN







highcharts