json - Google 图表 - 来自本地 json 文件的数据 - 自定义工具提示

标签 json file charts google-visualization tooltip

我正在使用 Google 图表来创建 DVB-C channel 可用性图表。图表数据是来自本地 json 文件的红色数据。这些图表工作得非常好，但我想为其添加一项功能，但我需要一些帮助。

我想添加的功能是自定义工具提示，但我不知道该怎么做。我知道我必须将所需的数据添加到 json，但就像我说的，我不确定如何做到这一点，以及如何更改我的 html 代码才能使其工作。我希望工具提示能够读取本地 html 文件并在工具提示上显示内容。

这是我的 html 代码:

   <!DOCTYPE html>
   <html>
   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

    <body>
        <div id="chart" style="width:3000px; height:600px;"></div> 
    </body>

    <script>
        // Visualization API with the 'corechart' package.
        google.charts.load('visualization', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawLineChart);

        function drawLineChart() {
            $.ajax({
                url: "./avail.json",
                dataType: "json",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                var channels = [['Channel', 'HKI (%)', 'LTI (%)']];    // Define an array and assign columns for the chart.

                // Loop through each data and populate the array.
                $.each(data, function (index, value) {
                    channels.push([value.Channel, value.HKI, value.LTI]);
                });

                // Set chart Options.
                var options = {
                    title: 'DVB-C Availability (HKI & LTI)',
                series: {
                    0: { color: '#ff3385', lineWidth: 5, pointSize: 5 },
                        1: { color: '#000000', lineWidth: 1, pointSize: 3},
                },
                vAxis: { "title": "Availability (%)", maxValue: 100 },
                hAxis : { "title": "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true' }, slantedText:true, slantedTextAngle:45 },
                chartArea:{left:70,top:50,right:40,width:"90%",height:"70%"},
                tooltip: {isHtml: true, trigger: 'both'},
                    legend: { position: 'top', textStyle: { color: '#555', fontSize: 14} } 
                };




                // Create DataTable and add the array to it.
                var figures = google.visualization.arrayToDataTable(channels)

                // Define the chart type (LineChart) and the container (a DIV in our case).
                var chart = new google.visualization.LineChart(document.getElementById('chart'));
                chart.draw(figures, options);      // Draw the chart with Options.
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert('Got an Error');
                }
            });
    }
</script>
</html>

这是我当前 json 文件的一小段:

[
 { "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
 { "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
 { "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
]

我应该在 json 中添加这样的内容吗？

[
{ "Channel": "MTV Rocks", "HKI": 99.104700, <object data="./hki1.html"></object> "LTI": 98.760400, <object data="./lti1.html"></object> },
{ "Channel": "MTV3 HD", "HKI": 99.724600, <object data="./hki1.html"></object>"LTI": 99.724600, <object data="./lti1.html"></object> },
{ "Channel": "MTV3", "HKI": 100.000000, object data="./hki1.html"></object>"LTI": 100.000000, object data="./lti1.html"></object> },
]

如果这是更改 json 的正确方法，我不知道如何更改 html 代码来使其工作。

也许有人可以帮我解决这个问题？

最佳答案

首先，“可视化” 不是 Google 图表的有效版本号。
看起来这是旧的库加载器代码留下的。
使用 'current' 代替... 

google.charts.load('current', { packages: ['corechart'] });

接下来，您需要将 html 从文件复制到 json，
而不是尝试引用外部文件。

工具提示只需要一个 html 片段，而不是一个完整的文件。

要添加自定义工具提示，首先我们需要添加工具提示列。
它应该是一个对象，如下... 

{type: 'string', role: 'tooltip', p: {html: true}}

如果您想要“HKI”和“LTI”的工具提示，
您需要在每个列标题后添加上述工具提示列... 

var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];

加载行时包含 html...

  $.each(data, function (index, value) {
    channels.push([
      value.Channel,
      value.HKI,
      '<div>custom html goes here</div>',
      value.LTI,
      '<div>custom html goes here</div>'
    ]);
  });

请参阅以下工作片段作为示例...

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {
  var data = [
   { "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
   { "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
   { "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
  ];

  var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];

  // Loop through each data and populate the array.
  $.each(data, function (index, value) {
    channels.push([
      value.Channel,
      value.HKI,
      '<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.HKI + '</div></div>',
      value.LTI,
      '<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.LTI + '</div></div>'
    ]);
  });

  // Set chart Options.
  var options = {
    title: 'DVB-C Availability (HKI & LTI)',
    series: {
      0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
      1: {color: '#000000', lineWidth: 1, pointSize: 3},
    },
    vAxis: {title: "Availability (%)", maxValue: 100},
    hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
    chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
    tooltip: {isHtml: true, trigger: 'both'},
    legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
  };

  // Create DataTable and add the array to it.
  var figures = google.visualization.arrayToDataTable(channels)

  // Define the chart type (LineChart) and the container (a DIV in our case).
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(figures, options);      // Draw the chart with Options.
}
.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
  padding-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

编辑

如果您想将外部 html 文件显示为工具提示，
隐藏标准工具提示可能是有意义的，
并显示外部文件'onmouseover'

请参阅以下工作片段作为示例...

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {
  var data = [
   { "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
   { "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
   { "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
  ];

  var channels = [['Channel', 'HKI (%)', 'LTI (%)']];

  // Loop through each data and populate the array.
  $.each(data, function (index, value) {
    channels.push([
      value.Channel,
      value.HKI,
      value.LTI
    ]);
  });

  // Set chart Options.
  var options = {
    title: 'DVB-C Availability (HKI & LTI)',
    series: {
      0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
      1: {color: '#000000', lineWidth: 1, pointSize: 3},
    },
    vAxis: {title: "Availability (%)", maxValue: 100},
    hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
    chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
    tooltip: {trigger: 'none'},
    legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
  };

  // Create DataTable and add the array to it.
  var figures = google.visualization.arrayToDataTable(channels)

  // Define the chart type (LineChart) and the container (a DIV in our case).
  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  var frame = document.getElementById('tooltip');

  // hide external html on mouse out
  google.visualization.events.addListener(chart, 'onmouseout', function () {
    frame.className = 'hidden';
  });

  // display external html on mouse over
  google.visualization.events.addListener(chart, 'onmouseover', function (props) {
    if (props.row === null) {
      return;
    }

    var chartLayout = chart.getChartLayoutInterface();
    var bounds = chartLayout.getBoundingBox('point#' + (props.column - 1) + '#' + props.row);
    frame.style.left = bounds.left + 'px';
    frame.style.top = bounds.top + 'px';

    // replace this
    frame.src = 'https://www.december.com/html/demo/hello.html';

    // with this
    //frame.src = '../' + figures.getColumnLabel(props.column) + (props.row + 1) + '.html';

    frame.className = 'tooltip';
  });

  chart.draw(figures, options);
}
.hidden {
  display: none;
  visibility: hidden;
}

.tooltip {
  background-color: #ffffff;
  position: absolute;
  height: 200px;
  width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
<iframe class="hidden" id="tooltip"></iframe>

关于json - Google 图表 - 来自本地 json 文件的数据 - 自定义工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54361690/

上一篇：angular - 如何在导入语法中使用环境变量？

下一篇：sql - 为什么我在使用更新级联时出现错误？

相关文章：

javascript - 尝试使用 JSON 获取级联 DDL 但未得到响应

json - 通过多个编码保留 json.RawMessage

c++ - 按字符读取字符串直到行尾 C/​​C++

javascript - 支持动态饼图的图形/图表？

ruby-on-rails - Rails chartkick 堆积条形图

charts - Kendo UI 图表图例可以自动删除空系列吗？

c# - 通过 Entity Framework 和 JSON (C#) 动态更新某些属性

c# - 在 ASP.NET Core 2.0 Web Api 中返回 "raw"json

android - Kotlin File(path).walkTopDown() 找不到文件

windows - 在 Windows 7 中根据文件路径更改文件名和移动文件

©2024 IT工具网  联系我们