Question

我有很高的图表。我在高级图表中创建了饼图，其工作正确。但它没有显示db的所有值。它只显示1列，我在db中有2列。我想在标签上显示两个列（Ready for Review（2）3.1％）。

在图片中我有两列表。我想在标签上显示两个列值

这是我的代码

var data = google.visualization.arrayToDataTable(ClaimSubmissionStatus);
        var css = ClaimSubmissionStatus;// 
        css.splice(0, 1);
        var mycss = css;

        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie',

        };

        var tooltip = {
            pointFormat: ':<b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',  '#6AF9C4'],
                allowPointSelect: false,
                size: '70%',
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {

                            //alert('Category: ' + this.x + ', value: ' + this.y);
                            debugger;
                            var status = this.name;
                            CLAIMSUBMISSIONSTATUSPIECHARTDetail(status);
                        }

                    }
                },
                dataLabels: {



                    enabled: true,
                    connectorWidth: 1.5,

                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        fontSize: 11,
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                        'black'

                    }
                },

            }
        };
        var series = [{
            type: 'pie',
            animation: false,

            data: mycss,
        }];
        Highcharts.getOptions().colors = Highcharts.map(
          Highcharts.getOptions().colors, function (color) {
              return {
                  radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                  stops: [
                     [0, color],
                     [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                  ]
              };
          }
       );
        var json = {};
        json.chart = chart;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#divClaimSubmission').highcharts(json);

Answer 1

要在数据标签中添加多个数据库值，您必须使用{/ 3}}函数，如

  dataLabels: {
    useHTML: true,
    formatter: function() {
      //mydata is one of the column value of database
      return '<b>' + this.point.options.mydata + " " + this.point.options.name + " " + this.point.options.y + '<b>';
    }
  }

请注意，您的系列数据应该类似于（在数据数组对象中添加mydata: 'Microsoft',）

  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'IE',
      y: 56.33,
      mydata: 'Microsoft', //I guess like this you have to add other data from database column
    }, {
      name: 'Chrome',
      y: 24.03,
      mydata: 'Google',
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38,
      mydata: 'Mozilla',
    }, {
      name: 'Safari',
      y: 4.77,
      mydata: 'Apple',
    }, {
      name: 'Opera',
      y: 0.91,
      mydata: 'Opera Software',
    }, {
      name: 'Other',
      y: 0.2,
      mydata: 'Proprietary',
    }]
  }]

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares January, 2015 to May, 2015'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        useHTML: true,
        formatter: function() {
          return '<b>' + this.point.options.mydata + " " + this.point.options.name + " " + this.point.options.y + '<b>';
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'IE',
      y: 56.33,
      mydata: 'Microsoft',
    }, {
      name: 'Chrome',
      y: 24.03,
      mydata: 'Google',
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38,
      mydata: 'Mozilla',
    }, {
      name: 'Safari',
      y: 4.77,
      mydata: 'Apple',
    }, {
      name: 'Opera',
      y: 0.91,
      mydata: 'Opera Software',
    }, {
      name: 'Other',
      y: 0.2,
      mydata: 'Proprietary',
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 2

您可以参考此链接来解决您的问题。

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-basic/

代码如：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    }]
});

Answer 3

只需更改该行

即可

格式：' {point.name}％：{point.percentage：.1f}％'，

要格式：' {point.name}％ :( {point.y}）{point.percentage：.1f}％'，

High Charts如何在标签上显示多个列值

3 个答案: