从JSON数组中添加额外的工具提示

Question

我有这样一个JSON数组：

chart_data = [
{category: 'A', per: '0.74', total: 10294, in: 5651, out: 5661},
{category: 'B', per: '0.72', total: 10294, in: 5556, out: 7751},
{category: 'C', per: '0.68', total: 10294, in: 5598, out: 5991},
{category: 'D', per: '0.54', total: 10294, in: 6551, out: 5001}
]

现在，我在列图表中显示数据，我使用的是每列图表数据，在高图表中，唯一可见的工具提示是“”/“”，但我想在工具提示中显示“总计、输入、输出”，所有这些都在工具提示中显示。

这是我的HighChart代码：

    plotColumnChart(chart_data:any, chart_config: any){
  
  let columnChartSeries = [];
  let categories = [];
  let columnChartData = {
    exporting: {
      chartOptions: { // specific options for the exported image
          plotOptions: {
              series: {
                  dataLabels: {
                      enabled: true
                  }
              }
          }
      },
      fallbackToExportServer: false
  },
    chart: {
      type: 'column',
      borderColor: '#c1e1c182',
      borderWidth: 1,
      borderRadius: 5,
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
    },
    title: {
      text: chart_config['name'],
      x: -20,
      style: {
        color: '#0D6ABF',
        fontWeight: 'bold'
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false,
    },
    xAxis: {
      categories: chart_data.map(function(point:any){
        return [(<any>Object).values(point)[0]]
    }),
      title: {
        text: null
      },
      gridLineColor: '#ffffff',
    },
    yAxis: {
      min: 0,
      tickInterval: 20,
      max:100,
      gridLineColor: '#ffffff',
      title: {
        text: null,
        align: null
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      shared: false,
      backgroundColor: 'black',
      borderColor: 'black',
      borderRadius: 10,
      style: {
        color: 'white'
      },
      useHTML: true,
      borderWidth: 3,
      headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
      formatter: function() {

      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          distance: "-80%",
          pointFormat: '{point.y}%',
          },
        },
      column: {
        pointPadding: 0.5,
        borderWidth: 0,
        showInLegend: true, 
        zones:[{
                  value: chart_config['color-format'][0],        // Values up to 50 (not including) ...
                  color: '#FA5F55'  // ... have the this color.
                },
                {
                  value: chart_config['color-format'][1],        // Values up to 60/70 (not including) ...
                  color: '#FFBF00' // ... have the this color.
                },
                {
                  color: '#98FB98' // Values greater than 70 ... have the this color.
                }                
              ],
              }
    },
    series: [
      {
        name: '', //chart_config['name'],
        color: '', //'#98FB98',
        pointWidth: 20,
        data: chart_data.map(function(point:any){                
            return [
              Number(
                    (
                      parseFloat(
                        
                        (<any>Object).values(point)[1]
                        
                        )*100                          
                      ).toFixed(0)
                  )
              ]
          })
      },
    ]
  } as any;

  Highcharts.chart(chart_config['id'], columnChartData);
  
}

和chart_config = {"id": 'column-chart', "name": 'ABC', 'color-format': [50, 70]};

有人能通过编写格式化程序函数来帮助我实现这一点吗？

Answer 1

如果不在数据中提供其他值，则不可能从图表级别获得其他值。在您的示例中，只有“每个”值被传递给series.data。在将数据解析为相关格式之后，还需要定义series.keys才能访问这些选项。

//Data parsing to the two dimensional array
let new_chart_data = [];

chart_data.forEach(data => {
  data.per = Number(data.per)
  new_chart_data.push([data.category, data.per, data.total, data.in, data.out])
})

//Chart
Highcharts.chart('container', {
  tooltip: {
    pointFormatter: function() {
        console.log(this.options)
      return `<b>Per:</b> ${this.y}</br><b>Total:</b> ${this.total}</br><b>In:</b> ${this.in}</br><b>Out:</b> ${this.out}</br>`
    }
  },

  series: [{
    type: 'column',
    keys: ['name', 'y', 'total', 'in', 'out'],
    pointWidth: 20,
    data: new_chart_data
  }]
});

API参考： https://api.highcharts.com/highcharts/series.column.keys

演示： https://jsfiddle.net/BlackLabel/3dh2m79c/

Answer 2

像这样吗？

public formatter(row): string {
   return row ? `${row.per}, ${row.in}, ${row.out}` : null;
}